Re: Image Carousel Automatic Scroll

How can I make an image carousel scroll automatically in the DAWN theme?

daralyant
Visitor
2 0 0

Hello,

 

I have the DAWN theme and I created an image carousel with a few of our products. I would like for the carousel to be able to scroll automatically upon user entrance to the site.

 

Please let me know how I can integrate this. I will send the code if need be, but the site is not yet active.

 

Thank you so much!

Replies 2 (2)

Yeady123
Explorer
61 7 9

To create an automatic image carousel in your DAWN theme, you can use a JavaScript library such as jQuery or Slick Slider.

Here are the general steps you can follow:

  1. Include the jQuery or Slick Slider library in your HTML code. You can add the library using a link tag in the head of your HTML code or by downloading the library files and adding them to your project.

For example, to add the jQuery library using a link tag, you can include this code in the head of your HTML file:

 

<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

 

  1. Create the HTML code for your image carousel. This will typically involve using HTML markup to define the structure of the carousel and including the images you want to display.

For example, you can use an HTML unordered list (ul) to define the structure of the carousel and add each image as a list item (li).

 

<div class="carousel-container">
  <ul class="carousel">
    <li><img src="image1.jpg"></li>
    <li><img src="image2.jpg"></li>
    <li><img src="image3.jpg"></li>
  </ul>
</div>

 

  1. Use JavaScript to activate the image carousel and add the automatic scrolling functionality.

For example, using Slick Slider library, you can add the following code to activate the slider and set it to scroll automatically:

 

$(document).ready(function(){
  $('.carousel').slick({
    autoplay: true,
    autoplaySpeed: 3000, //set the delay for scrolling
    arrows: false,
    dots: true
  });
});

 

The above code sets the autoplay option to true and autoplaySpeed to 3000, which means the slider will automatically scroll every 3 seconds. It also hides the navigation arrows and shows the pagination dots.

Note that you will need to add the appropriate CSS styles to your carousel container and individual images to achieve the desired appearance and behavior.

I hope this helps you get started with creating an automatic image carousel in your DAWN theme.

- Was my reply helpful? Click "Like" to let me know!
- ----Was your question answered? Mark it as an Accepted Solution
You can get in touch with me via WhatsApp on +88013-13075440
Email: shahinkhan2424ft@gmail.com
daralyant
Visitor
2 0 0

The section I want to add the carousel to is labelled "Featured Products" and the section is "Featured Collection". Will I have to pull each individual image from my site or is there a CSS code I can insert into the theme on Shopify directly that will allow the same effect?

 

I essentially just want the content to auto-scroll.