Menu icon Foundation
Interchange and Slick Slider

I'm trying to get Interchange and Slick Slider working together but it loads only the last image of the string in html for interchange (see code)—it loads 'medium' only and not small or default. Doesn't matter how I order the string, it loads the last one in the string.

I have a full SCSS installation of Foundation; I have not turned on/off any other components other than what is default for the SCSS installation out of the box. I tried adding "" but that caused problems, so I think it wasn't necessary as it was adding it twice?

<div class="slider">
    <div><img class="item" data-interchange="[images/coffee.jpg, (default)], [images/coffee-small.jpg, (small)], [images/coffee-medium.jpg, (medium)]"></div>
	<div><img class="item" data-interchange="[images/apples.jpg, (default)], [images/apples-small.jpg, (small)], [images/apples-medium.jpg, (medium)]"></div>
	<div><img class="item" data-interchange="[images/horizon.jpg, (default)], [images/horizon-small.jpg, (small)], [images/horizon-medium.jpg, (medium)]"></div>
						
</div>
            

         

interchangeSlick Slider

I'm trying to get Interchange and Slick Slider working together but it loads only the last image of the string in html for interchange (see code)—it loads 'medium' only and not small or default. Doesn't matter how I order the string, it loads the last one in the string.

I have a full SCSS installation of Foundation; I have not turned on/off any other components other than what is default for the SCSS installation out of the box. I tried adding "" but that caused problems, so I think it wasn't necessary as it was adding it twice?

<div class="slider">
    <div><img class="item" data-interchange="[images/coffee.jpg, (default)], [images/coffee-small.jpg, (small)], [images/coffee-medium.jpg, (medium)]"></div>
	<div><img class="item" data-interchange="[images/apples.jpg, (default)], [images/apples-small.jpg, (small)], [images/apples-medium.jpg, (medium)]"></div>
	<div><img class="item" data-interchange="[images/horizon.jpg, (default)], [images/horizon-small.jpg, (small)], [images/horizon-medium.jpg, (medium)]"></div>
						
</div>
            

         
Rafi Benkual over 4 years ago

Looks like this has been answered before. You can check out some solutions here:
- http://foundation.zurb.com/forum/posts/18344-issue-with-interchange-and-slick-slider

Also, did you run the replace function?

 $(document).foundation();
$("#swap").on("replace", function() {
  $(document).foundation();
});

Where the id=#swap is the id of the containing div for the carousel

Ben Siegfried over 4 years ago

Well in my case would I have "id=#swap" inside the image tag or the div tag? I've tried both and neither works. I do have the replace function installed.

Also, I read the other post and while I am using partials for off-canvas menu and have that working, I am not sure that changing interchanges source code would keep that working if it were a fix for slick slider.

Rafi Benkual over 4 years ago

You'll have better luck using interchange to swap out the whole slider rather than the images within.

Ben Siegfried over 4 years ago

Well, then, like this?

<div id="swap" class="slider">
            <div><img data-interchange="[images/coffee-small.jpg, (small)], [images/coffee-medium.jpg, (medium)], [images/coffee-large.jpg, (large)]"></div>
            <div><img data-interchange="[images/apples-small.jpg, (small)], [images/apples-medium.jpg, (medium)], [images/apples-large.jpg, (large)]"></div>
            <div><img data-interchange="[images/horizon-small.jpg, (small)], [images/horizon-medium.jpg, (medium)], [images/horizon-large.jpg, (large)]"></div>
          </div>

How do you I know there is even swapping going on? I've tried to inspect for it in Chrome Dev tools and it doesn't seem that it can be inspected or can it?

Rafi Benkual over 4 years ago

This is what I did with orbit and it worked:

On your page:

<div id="swap" data-interchange="
    [partials/orbit-small.html, (small)], 
    [partials/orbit-medium.html, (medium)]">
 </div>

Then in my partial is the whole slider.

I wrote about it here with navigations: http://zurb.com/university/lessons/serve-users-only-the-files-they-need

Ben Siegfried over 4 years ago

Rafi,

Slick Slider instructs you to use "div > your content" but that causes my slider to have quirks with using interchange. I tried "img > data-interchange" and put the swap ID on the containing div and it works! To check to make sure it works, I made a red, blue and green image and put them in to check for occurrence of swapping, and it swaps. Also, I am using your off-canvas method based on your article and am using separate IDs for the menu and slider that are both using Interchange.

<div class="row">
        <div class="large-12 columns homeslider">      
          <div id="imageswap" class="slider">
            <img data-interchange="[images/coffee-small.jpg, (small)], [images/coffee-medium.jpg, (medium)], [images/coffee-large.jpg, (large)]">
            <img data-interchange="[images/apples-small.jpg, (small)], [images/apples-medium.jpg, (medium)], [images/apples-large.jpg, (large)]">
            <img data-interchange="[images/horizon-small.jpg, (small)], [images/horizon-medium.jpg, (medium)], [images/horizon-large.jpg, (large)]">
          </div>
          <a href="#"><p class="text-center morestuff">MORE STUFF DOWN HERE &nbsp;&nbsp;<i class="fa fa-hand-o-down"></i></p></a>
        </div>
      </div>
 <script type="text/javascript">
    $(document).foundation();
    $("#menuswap", "#imageswap").on("replace", function() {
    $(document).foundation();
    });
    </script>