Slideshow shows only the first picture - Debut theme

Solved
Highlighted
New Member
9 0 0

Hey everybody,
I tranfer my site to RTL with the code on theme.liquid:

<html class="no-js" lang="{{ shop.locale }}" dir="rtl">

and from then my slideshow on the home page shows only the first picture.
I click the buttons of the sliders and the photos are not showing - just white screen.
The same problem in the phone view
Please, need your help !
Thank you !

0 Likes
New Member
8 0 0

Send me your website url link to view

 

0 Likes
Highlighted
New Member
9 0 0
Highlighted
New Member
8 0 0

Go to theme.liquid and place the below code above the <head>

 

<!doctype html> <!--[if IE 9]> <html class="ie9 no-js" lang="{{ shop.locale }}"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html class="no-js" lang="{{ shop.locale }}" dir="rtl"> <!--<![endif]-->

0 Likes
Highlighted
New Member
9 0 0

Nothing change, same problem

0 Likes
Highlighted
New Member
8 0 0
Highlighted

Success.

Shopify Expert
2686 67 716

Slideshow can work with RTL, but it has to be instructed to do so.

You need to

1) make a backup theme copy via Actions=>Duplicate

2) open your theme.js Asset and find the following code ~line 1625:

 

    var loadSlideA11yString = this.$slideshow.data('slide-nav-a11y');

    this.settings = {
      accessibility: true,
      arrows: false,
      dots: true,
      fade: true,

and modify it like this:

 

 

    var loadSlideA11yString = this.$slideshow.data('slide-nav-a11y');

    this.settings = {
// --tim: make it aware of RTL
rtl: $('html').is('[dir="rtl"]'), accessibility: true, arrows: false, dots: true, fade: true,

This should fix your home-page slideshow.

 

 

You may also need to do the same for product page thumbnails on mobile, the code is ~line 4568:

 

    _initThumbnailSlider: function() {
      var options = {
        slidesToShow: 4,

to 

    _initThumbnailSlider: function() {
      var options = {
  // --tim: make it aware of RTL
rtl: $('html').is('[dir="rtl"]'), slidesToShow: 4,

 

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
New Member
9 0 0

 


@tim wrote:

Slideshow can work with RTL, but it has to be instructed to do so.

You need to

1) make a backup theme copy via Actions=>Duplicate

2) open your theme.js Asset and find the following code ~line 1625:

 

    var loadSlideA11yString = this.$slideshow.data('slide-nav-a11y');

    this.settings = {
      accessibility: true,
      arrows: false,
      dots: true,
      fade: true,

and modify it like this:

 

 

    var loadSlideA11yString = this.$slideshow.data('slide-nav-a11y');

    this.settings = {
// --tim: make it aware of RTL
rtl: $('html').is('[dir="rtl"]'), accessibility: true, arrows: false, dots: true, fade: true,

This should fix your home-page slideshow.

 

 

You may also need to do the same for product page thumbnails on mobile, the code is ~line 4568:

 

    _initThumbnailSlider: function() {
      var options = {
        slidesToShow: 4,

to 

    _initThumbnailSlider: function() {
      var options = {
  // --tim: make it aware of RTL
rtl: $('html').is('[dir="rtl"]'), slidesToShow: 4,

 


Thank you so much !!!

0 Likes