Carousel

In our newest V9.1 templates, we have added an image carousel on the home page. This allows for a series of images to be displayed in a relatively small space. The photos will automatically cycle, but will stop on hover. You can also link carousel images to a larger image or to a page.

Image Carousel

Note that when editing in Design View, the content will appear expanded, with each image sitting on top of the one below it, so it will be easy to see your images. The html below shows how your code needs to look; just adjust the name of your image and the file path to the images.

html
  1. <div class="featured">
  2.    <div><img alt="" src="images/samples/product1.jpg"></div>
  3.    <div><img alt="" src="images/samples/product2.jpg"></div>
  4.    <div><img alt="" src="images/samples/product3.jpg"></div>
  5.    <div><img alt="" src="images/samples/product4.jpg"></div>
  6.    <div><img alt="" src="images/samples/product5.jpg"></div>
  7.    <div><img alt="" src="images/samples/product6.jpg"></div>
  8.    <div><img alt="" src="images/samples/product7.jpg"></div>
  9.    <div><a href="news.html"><img alt="" src="images/samples/product8.jpg"></a></div> <!-- with a link -->
  10. </div>

If your images are large, in Design View they will appear at their normal size. In the browser, they will automatically scale down to a max-width of 180 or 190 pixels. You can change this max-width in the CSS file. While your images can vary in width, for best results they should be uniform in height.

CSS
  1. /* Image styling */
  2. .slick-slide img {
  3. margin: 6px;
  4. padding: 5px;
  5. background: #ddd;
  6. box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  7. border-radius: 5px;
  8. max-width: 190px;
  9. height: auto;}

The Slick Carousel is offered for free from https://kenwheeler.github.io/slick/. There are a lot of options for how the carousel displays images, so you might want to take a look at the original examples. You can then adjust the javascript (located in main.js in the javascripts folder of your template) to suit your needs. Take care, however, since changing one value often affects the others.

Javascript (in main.js)
  1. //SLICK
  2. $('.featured').slick({
  3. dots: true, //true shows the dots below the pictures, false will hide them//
  4. arrows:true, //true shows the arrows, false will hide them//
  5. autoplay: true, //if you do not want autoplay, set to false//
  6. centerMode: true,
  7. variableWidth: true,
  8. autoplaySpeed: 2500, //you can adjust the speed//
  9. infinite: true, //true sets the photos to loop, false will play once//
  10. speed: 300, //if autoplay set to false, this adjusts the speed//
  11. slidesToShow: 4,
  12. slidesToScroll: 1,
  13. });