blog-banner

Slideshow in Drupal

  • Drupal 7
  • Drupal Planet
  • Slideshow

Drupal JQuery Slider

 

This post explains about creating a slideshow in drupal. There are many ways and plugins available to create a slideshow in drupal and I am going to discuss some methods which will be very efficient and useful.

1) Using the Views slideshow module

2) Using the jQuery cSlider plugin

3) Using the Bootstrap carousel

1. Using Views slideshow module:

The modules required for this method are:

1) Views

2) Views slideshow

3) jQuery cycle plugin ( Download here and place it at sites/all/libraries/jquery.cycle/)

Enable the added modules. To create views slideshow, create a new content type for instance "Slideshow" with an image field which can be used as a slideshow image.

Add multiple slideshow nodes with images. Then, we have to create a view block with slideshow content. Select "slideshow" as required format and configure transition effect in the Settings link.

After saving this view, place this view block at necessary region at admin/structure/blocks.

2. Using jQuery cSlider plugin:

1) You can download this plugin from here. There is also a demo file in this plugin which can be used as a reference.

2) Copy style.css from css folder and jquery.cslider.js and modernizer.js from js folder

3) Use simple classes to add sliding effect to images and text to the slides.

<div id="da-slider" class="da-slider">
  <div class="da-slide">
    <h2>Some headline</h2>
    <p>Some description</p>
    <a href="#" class="da-link">Read more</a>
    <div class="da-img">
      <img src="images/1.png" alt="image01" />
    </div>
  </div>
  <div class="da-slide">
    <!-- ... -->
  </div>
    <!-- ... -->
  <nav class="da-arrows">
    <span class="da-arrows-prev"></span>
    span class="da-arrows-next"></span>
  </nav>
</div>
<div id="da-slider" class="da-slider">
  <div class="da-slide">
    <h2>Some headline</h2>
    <p>Some description</p>
    <a href="#" class="da-link">Read more</a>
    <div class="da-img">
      <img src="images/1.png" alt="image01" />
    </div>
  </div>
  <div class="da-slide">
    <!-- ... -->
  </div>
    <!-- ... -->
  <nav class="da-arrows">
    <span class="da-arrows-prev"></span>
    <span class="da-arrows-next"></span>
  </nav>
</div>

It can also be used as the block by adding a separate template file for this slideshow.

3. Using Bootstrap carousel:

If you are using the bootstrap theme, then creating a slideshow is quite easy. Bootstrap uses carousel.js to add slideshow effects. Here is a sample code:

<div id="sample_carousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#sample_carousel" data-slide-to="0" class="active"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="sample.jpg">
    </div>
  </div>

   <!-- Left and right controls -->
  <a class="left carousel-control" href="#sample_carousel" 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="#sample_carousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

The outermost <div>:

Carousel requires the use of a id (in this case id="sample-carousel") for carousel controls to function properly.

The class="carousel" specifies that this <div> contains a carousel.

The .slide class adds a CSS transition and animation effect, which makes the items slide when showing a new item. Omit this class if you do not want this effect.

The data-ride="carousel" attribute tells Bootstrap to begin animating the carousel immediately when the page loads.

The "Indicators" part:

The indicators are the little dots at the bottom of each slide (which indicate how many slides there are in the carousel, and which slide the user is currently viewing).

The indicators are specified in an ordered list with class .carousel-indicators.

The .data-target class points to the id of the carousel.

The .data-slide-to class specifies which slide to go to, when clicking on the specific dot.

The "Wrapper for slides" part:

The slides are specified in a <div> with class .carousel-inner.

The content of each slide is defined in a <div> with class .item. This can be text or images.

The .active class needs to be added to one of the slides. Otherwise, the carousel will not be visible.

The "Left and right controls" part:

This code adds "left" and "right" buttons that allow the user to go back and forth between the slides manually.

The data-slide attribute accepts the keywords "prev" or "next", which alters the slide position relative to its current position.

Some more slideshow modules:

Get awesome tech content in your inbox