logicSlider

Logic Slider = Easy Responsive Carousels on your Higher Logic microsites

Learn how to easily add Bootstrap Carousels to your Higher Logic microsites with Logic Slider - without having to know or even look at HLTML, CSS or JavaScript. Previously you had to dig through complex HTML to add or update carousels on your microsites. Now Logic Slider gives you the power to add fully responsive carousels to your microsites using the standard WYSIWYG editor.

slide-1.png

Slide Title Goes Here

Slide Subtitle Goes Here

Button Here
slide-3.png

2 Slide Title Goes Here

Slide Subtitle Goes Here

Button Here
slide-2.png

3 Slide Title Goes Here

Slide Subtitle Goes Here

Button Here

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 Title Goes Here

Slide Subtitle Goes Here

Button Here

2 Slide Title Goes Here

Slide Subtitle Goes Here

Button Here

3 Slide Title Goes Here

Slide Subtitle Goes Here

Button Here

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.

  • theme-logic-logic-slider  >>  Add this class to tellLogic Slider that this is the table you want turned into a carousel.
  • logic-slider-controls  >>  Add this class to tell Logic Slider to add the arrows that let you navigate left and right through your carousel.
  • logic-slider-indicators  >>  Add this class to tell Logic Slider to add the dots that allow you to jump between 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.