Carousel Slider

This custom widget does not apply to all themes. Check your theme's description first, to make sure it's included.

 

To automatically cycling the items of the Carousel slider you need to add the following lines in the footer of your page:

<script type="text/javascript">
jQuery('.carousel').carousel();
</script>

 

Options

Nametypedefaultdescription
interval number 5000 The amount of time to delay between automatically cycling an item.
pause string "hover" Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.

Methods

.carousel(options)

Initializes the carousel with an optional options object and starts cycling through items.

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

Cycles through the carousel items from left to right.

.carousel('pause')

Stops the carousel from cycling through items.

.carousel(number)

Cycles the carousel to a particular frame (0 based, similar to an array).

.carousel('prev')

Cycles to the previous item.

.carousel('next')

Cycles to the next item.

Events

Bootstrap's carousel class exposes two events for hooking into carousel functionality.

EventDescription
slide This event fires immediately when the slide instance method is invoked.
slid This event is fired when the carousel has completed its slide transition.

DotNetNuke 6

In the new version of DNN you need to add the script in the settings of the module ( manage > settings > advanced settings > footer).

Have more questions? Submit a request

Comments

  • Avatar
    Stas Popov

    DNN 6: Where do I need to add the code below to start the Slider on page load.

    $('.carousel').carousel({
    interval: 2000
    })

  • Avatar
    Mariana Silva

    Hello Stas,

    In the new version of DNN you need to add the script in the settings of the module ( manage > settings > advanced settings > footer).

  • Avatar
    Stas Popov

    I added the code as support article 

    <script type="text/javascript">     

    jQuery('.carousel').carousel();

    </script>

    But what about if I need

    .carousel('cycle')

    than footer code above needs to be replace on

    <script type="text/javascript"> 

    $('.carousel').carousel({   interval: 2000 })

    </script>

    ???

  • Avatar
    Stas Popov

    sorry not a  .carousel('cycle')

    I meant

    $('.carousel').carousel({   interval: 2000 })

  • Avatar
    Mariana Silva

    What is the theme that you are using?

  • Avatar
    Luca 2next

    Hello,

    i'm using Metro skin v2.0.3 on dnn 6.2.4.

    My Problems:

    1. the carousel doesn't start to slide, only if i click on right icon the carousel start to slide.

    2. In the example on metro tuning the slide effect (slow motion) is a slide of image from right to left. In my case the slide change text and image immediately without effect.

    into footer of advanced setting of Module Setting of HTML-Module i put this:

    <script type="text/javascript">

           $('.carousel').carousel({

          interval: 500

         })

    </script>

    Thanks

  • Avatar
    Mariana Silva

    Hello Luca, 

    Please confirm if you your structure start like this:

    <div class="carousel slide" id="myCarousel">

  • Avatar
    Luca 2next

    here you are, my first code:

    <div id="myCarousel" class="carousel">

        <!-- Carousel items -->

        <div class="carousel-inner">

            <div class="active item">

                <img alt="" src="/portals/0/Images/banner-slide36.jpg" />

                <div class="carousel-caption">

                    <h4>First Thumbnail label</h4>

                    <p>Cras justo odio, at eget metus. Nullam id dolor id nibh ultricies

                    vehicula ut id elit.</p>

                </div>

            </div>

            <div class="item">

                <img alt="" src="/portals/0/Images/hp\_banner8b.gif.png" />

                <div class="carousel-caption">

                    <h4>Second dsdsl kdsl a</h4>

                    <p>Cras justo odio, dapibus ac eget quam. Donec id elit non mi porta

                    gravida at eget metus. Nullam id dolor id nibh ultricies vehicula

                    ut id elit.</p>

                </div>

            </div>

            <div class="item">

                <img alt="" src="/portals/0/Images/banner\_slide02.jpg" />

                <div class="carousel-caption">

                    <h4>tirdth label label</h4>

                    <p>metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

                </div>

            </div>

        </div>

        <!-- Carousel nav -->

        <a class="carousel-control left" data-slide="prev" href="#myCarousel">‹</a>

        <a class="carousel-control right" data-slide="next" href="#myCarousel">›</a>

    </div>

     

    With your suggest the slide has the effect!!

    (For information: where is in example code or tutorial class='carousel slide' ?)

    Ok, now there is only a problem: slide doesn't start itself. If i click on right icon yes... 

    Thanks

  • Avatar
    Mariana Silva

    Can you please send me the link? (Please note that you can open a ticket)

    Leave the "slide", is used to correct the fade in IE.

  • Avatar
    Luca 2next

    Ok, open a ticket.

     

    Thanks

  • Avatar
    Luca 2next

    <script type="text/javascript">

       $(document).ready(function() {        

          $('.carousel').carousel({interval: 5000 });

    });

     

    thanks to Mariana...

     </script>

  • Avatar
    Peter Brems

    Hi,

    I can't get it right using DNN7 and the SPC skin. It is not rotating correctly and there is extra space around the image.

    Kind regards,

    Peter 

  • Avatar
    Peter Brems

    After playing with some settings I found the solution. You can't use the display modus 'text' but have to use rough

  • Avatar
    Dan Holme

    I got the slider working in Orchard.  But what is the default size; and is there a way to CHANGE THE SIZE? 

  • Avatar
    Dan Holme

    Also, can I change the positioning/size/color/style of the slider text?  The result I'm getting ( http://intelliem.azurewebsites.net) is nothing like the "demo"

  • Avatar
    Sue Buchelt

    I have just downloaded the SPC theme, which says it comes with the carousel slider. How do I set it up? Basic 'How to instructions' for this DNN7 Newbie, please!

  • Avatar
    Sue Buchelt

    I still think you need to have a basic 'how to', but I was able to piece some instructions together using other websites.... I've got it working but the slides are left aligned and it would be great to be able to adjust the background of the sliding image to a specific height. I don't want my images to take over the entire page....

     

Got a question?

If you can't find the answer to your question, you can contact us.
We are here and happy to help.

Powered by Zendesk