Da. Syntex Da. Syntex - 3 months ago 14
jQuery Question

Issue when using two images for every slide

Hey guys, hope you are having a great day.

I am having a problem that has been annoying me for a couple of days. Here is how I would describe it, if you want any further details feel free to ask:

I am trying to use two images for every slide and I want only one of the images to be visible. When the width becomes smaller than 800px I want to change the image to the other one. I made this possible with simple CSS. And it works, but there is a problem.

When the slider changes slide suddenly the image that is not supposed to be visible appears under the image that is supposed to be visible, but it quickly disappears as soon as the image has quit scrolling.

I do not want the images to display together at all. How do I fix this issue?

I could not figure out how jsFiddle works, but here is some of the code:



#twins7-0 {
display: none;

}

#pizza13-0 {
display: none;
}

#twins1-0 {
display: none;
}

@media screen and (max-width: 800px) {

#twins7-0 {
display: block;
}

#twins7-1 {
display: none;
}
#pizza13-0 {
display: block;
}

#pizza13-1 {
display: none;
}

#twins1-0 {
display: block;
}

#twins1-1 {
display: none;
}

}

<div class="slider-container">
<div class="slider">
<div class="slider-content">
<div id="pizza">
<img src="img/twins-stock/store-images/pizza13-1.jpg" alt="pizza" id="pizza13-1">
<img src="img/twins-stock/store-images/pizza13.jpg" alt="pizza" id="pizza13-0">

</div>
<div class="slider-text" id="pizza-text">
<h1>Pizza med färska råvaror</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error id dignissimos ut?</p>
</div>
</div>
<div class="slider-content">
<div id="twins1">
<img src="img/twins-stock/store-images/pizza12-1.jpg" alt="twins1" id="twins1-1">
<img src="img/twins-stock/store-images/pizza12.jpg" alt="twins1" id="twins1-0">

</div>
<div class="slider-text" id="twins1-text">
<h1>Pizza med färska råvaror</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="slider-content">
<div id="twins7">
<img src="img/twins-stock/store-images/twins7-1.jpg" alt="twins7" id="twins7-1">
<img src="img/twins-stock/store-images/twins7.jpg" alt="twins7" id="twins7-0">
</div>
<div class="slider-text" id="twins6-text">
<h1>Pizza med färska råvaror</h1>
<p>Deserunt, quam, voluptate! Error id dignissimos ut? Dorro harum deleniti aliquam.</p>
</div>
</div>
</div>
</div>




Answer

Firstly, you should use classes instead of lots of individual id's, it'll make you code so much more streamlined and easy to manage!

Having said that, I found that your css rules were probably being overwritten by slick's styles. To override them properly you could either rearrange the priority of your css (maybe slick's css was being loaded after yours as well) or you could be more specific in your css: here's a good article about that kind of thing.

Here's a JSFiddle I put together: https://jsfiddle.net/kuxzs7sz/1/. You can see how much css I've been able to remove by just using classes, and it does the exact same thing. To be safe, I've also used a media query so that the first images are only shown on larger screens:

@media screen and (min-width: 801px) {
  .slick-slide img.big{
    display: block;

  }
  .slick-slide img.small {
    display: none;
  }
}

@media screen and (max-width: 800px) {
  .slick-slide img.big{
    display: none;
  }

  .slick-slide img.small {
    display: block;
  }
}