logicSlider archive

redirect home

Logic Slider

Bootstrap Carousels on Higher Logic for Non-Coders

Now in limited BETA release.

Add Bootstrap Carousels to your Higher Logic Microsites without having to know or even look at HLTML, CSS, or JavaScript. Create and manage your carousels as a single column table using the WYSIWYG content editor instead of digging through HTML to add or update carousels. 

slide-1.png

NO HTML

I really like cheese. Don't you?

Yes, I really like cheese.

slide-2.png

NO CSS

What's your favorite cheese?

Hmm, Let me think

slide-3.png

NO JavaScript

Cheese is a Beautiful Thing

Let's see some

Previously in the CMS...

You would have to edit the carousel by digging through HTML like this to add, remove, or change slides.

<div id="theme-logic-logic-slider" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#theme-logic-logic-slider" data-slide-to="0" class=""></li>
        <li data-target="#theme-logic-logic-slider" data-slide-to="1" class="active"></li>
        <li data-target="#theme-logic-logic-slider" data-slide-to="2" class=""></li>
        <li data-target="#theme-logic-logic-slider" data-slide-to="3" class=""></li>
    </ol>
    <div class="carousel-inner tlinner" role="listbox">
        <div class="item">
            <img src="http://placehold.it/1200x450/74828F/74828F">
            <div class="carousel-caption">
                <h1>Slide Title Goes Here</h1>
                <p>Slide Subtitle Goes Here with a longer description that tells you stuff about things</p>
                <p><a href="http://www.theme-logic.com/logicslider?and-this-url-can-go-longer=yes-it-can" class="btn btn-lg btn-primary">Button Here</a></p>
            </div>
        </div>
        <div class="item active">
            <img src="http://placehold.it/1200x450/C25B56/C25B56">
            <div class="carousel-caption">
                <h1>Welcome to Slide Title Nummber2</h1>
                <h2>Slide Subtitle Goes Here and this content can get rather long as well</h2>
                <p><a href="http://www.theme-logic.com/logicslider?and-this-url-can-go-longer=yes-it-can" class="btn btn-lg btn-primary">Button Here</a></p>
            </div>
        </div>
        <div class="item">
            <img src="http://placehold.it/1200x450/96C0CE/96C0CE">
            <div class="carousel-caption">
                <h1>Another Slide Title Can Go Right Here</h1>
                <h3>Slide Subtitle Goes Here with a longer description that tells you stuff about things and other stuff about things</h3>
                <p><a href="http://www.theme-logic.com/logicslider?and-this-url-can-go-longer=yes-it-can" class="btn btn-lg btn-primary">Button Here</a></p>
            </div>
        </div>
        <div class="item">
            <img src="http://placehold.it/1200x450/BEB9B5/BEB9B5">
            <div class="carousel-caption">
                <h1>3 Slide Title Goes Here</h1>
                <h3>Slide Subtitle Goes Here with a longer description that tells you stuff about things</h3>
                <p><a href="http://www.theme-logic.com/logicslider?and-this-url-can-go-longer=yes-it-can" class="btn btn-lg btn-primary">Button Here</a></p>
            </div>
        </div>
    </div>
    <a class="left carousel-control" href="#theme-logic-logic-slider" role="button" data-slide="prev">
    	<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    	<span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#theme-logic-logic-slider" role="button" data-slide="next">
    	<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    	<span class="sr-only">Next</span>
    </a>
   </div>

Now in the WYSIWYG...

You create a single-column table like this with images text and links. Each cell is then turned into the a slide and the whole things becomes a bootstrap carousel.

slide-1.png

NO HTML

I really like cheese. Don't you?

Yes, I really like cheese.

slide-2.png

NO CSS

What's your favorite cheese?

Hmm, Let me think

slide-3.png

NO JavaScript

Cheese is a Beautiful Thing

Let's see some

How it Works

Step 1

Sign up for Logic Slider Below.

Step 2

Add the URL we email you to the "Custom JavaScript" field on "Custom CSS/JS/Meta" page of your Higher Logic admin site.

Step 3

Create your table of slides as described above with your combination of images, text, and links. If you want a button, it must be within a Heading 6.

Step 4

Add these classes to the "CSS Wrapper Class Name" section of the HTML content item containing your slides table.

  • theme-logic-logic-slider  >>  Tell Logic Slider that this is the table you want turned into a carousel.
  • ls-arrows  >>  adds the arrows that let you navigate left and right through your carousel.
  • ls-dots  >>  Adds the dots that allow you to jump between slides.
  • ls-speed-XXXX >> Adjusts the slide in/out speed. Replace XXXX with a number of milliseconds.
  • ls-delay-XXXX >> Adjusts the time between slide retation. Replace XXXX with a number of milliseconds.
  • ls-auto-on >> Tells Logic Slider to auto rotate the slides.

Step 5

Done! You win!

Use Logic Slider on Your Site

Questions, Comments, Feature Requests?

Email me at jnprevatte@gmail.com.

Connect with me on HUG.