Make slideshow in debut theme stop at end of first play

Highlighted
Shopify Partner
3 0 0
 

How can I make the slideshow in the Debut theme only play once and stop on the last slide,  Currently it loops.

Thank you

0 Likes
Highlighted
Shopify Staff
Shopify Staff
335 32 134

Hi, Robbie!

 

This is May from Shopify.

 

You can actually customize your slider in your theme settings. If you go to your admin, and click on 'Online Store > Customize',

 

06-55-doms2-i0jcu

 

Then, on the editor to the left, click on 'Slideshow' and uncheck the box 'Auto rotate slides'. Finally, click 'Save'. This should stop your slideshow from looping automatically. 

 

If this isn't quite what you were after, let me know and we can continue with our support.


Kind Regards,

 

May

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Shopify Partner
3 0 0
Thank you. That’s not quite what I needed. That stops it from playing the slideshow automatically. What I’d like is for the slideshow to automatically play through once and then stop on the last slide.
0 Likes
Highlighted
Shopify Expert
2684 67 845

Robbie,

that will require a modification:

1. Make a backup copy of your theme by going Actions => Duplicate

2. Open your theme.js Asset. 

3. Now you need to find the right piece of code:

 

theme.Slideshow = (function() {
  ...
  function slideshow(el, sectionId) {
  ...
  this.settings = {
      accessibility: true,
      arrows: false,
      ...

I've omitted some lines for compactness, but the structure is here.

 

4. Add a new line "infinite: false," to the this.settings object -- like this:

 

this.settings = {
      infinite: false,
      accessibility: true,
      arrows: false,
      ...

Save, try.

This should do it.

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Highlighted
Shopify Partner
7 0 5

This is the correct answer but it's worth noting the Debut theme uses the slim version of Slick, which means you can't use the infinite option.

In order to use the full version download the slick-min.js from Slick, navigate to the Vendor.js file in your theme and replace the line of text directly under 

 * slick-slim.min.js
 */

You can also update the comment to slick-min.js.

The line of text will end with 

}});

This should be replaced with 

}}),/*!

Save that and now you should be able to use the 'infinite' option as instructed.

0 Likes
Highlighted
Tourist
11 0 1

Hello mattdenoronha,

 

I was trying to follow your instructions for this post. But I'm a bit confused with this line of the instructions:

 

In order to use the full version download the slick-min.js from Slick, navigate to the Vendor.js file in your theme and replace the line of text directly under 

 * slick-slim.min.js
 */ 

I downloaded the slick-min.js as instructed, and I add it to my sites assets directory. But I'm having a hard time figuring out what to replace the line of text with. Can you please tell me exactly what I should replace this line of text with?

 

Thank you,

Jay 

0 Likes
Highlighted
Shopify Partner
7 0 5

Replace it with the contents of slick-slim.min.js.

Highlighted
Tourist
11 0 1

Thank you for responding to my inquiry. I added the line infinite: false, to theme.js and I replaced the line of text with the content of slick.min.js as you suggested. But unfortunately, the slider continues to cycle. Is there something I'm missing?

 

Thanks

0 Likes
Highlighted
New Member
2 0 0

This is the first time I've actually tried to modify code, and I'm amazed I was able to find the exact line - many thanks for your detailed instructions. However, unfortunately it didn't work..

I followed instructions and inserted:

infinite: false,

The next line are as follows - I didn't modify them..

accessibility: true,

arrows: false,

dots: true,

fade: true 

etc. etc.

0 Likes
Highlighted
Shopify Partner
7 0 5

Drop me an email, I'll take a look.

help@matthewdenoronha.com

0 Likes