CODEWITHSUNDEEP
jquerytwitter-bootstrapslick.js
katie hudson
katie hudson

Reputation: 2893

Custom slick slider in bootstrap layout

I am using Slick JS

I have set it up in a pretty simple bootstrap layout

<section id="inside" class="section">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <h3>Some title</h3>
        <p class="section-subtitle">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
        </p>
      </div>
      <div class="col-md-8">
        <div class="slider center">
          <div class="preview-carousel">
            <div class="item"> <img src="http://www.al-akaria.com/wp-content/uploads/2016/02/Placeholder-Vertical.jpg" class="img-fluid"></div>
            <div class="item"> <img src="http://www.al-akaria.com/wp-content/uploads/2016/02/Placeholder-Vertical.jpg" class="img-fluid"></div>
            <div class="item"> <img src="http://www.al-akaria.com/wp-content/uploads/2016/02/Placeholder-Vertical.jpg" class="img-fluid"></div>
            <div class="item"> <img src="http://www.al-akaria.com/wp-content/uploads/2016/02/Placeholder-Vertical.jpg" class="img-fluid"></div>
            <div class="item"> <img src="http://www.al-akaria.com/wp-content/uploads/2016/02/Placeholder-Vertical.jpg" class="img-fluid"></div>
            <div class="item"> <img src="http://www.al-akaria.com/wp-content/uploads/2016/02/Placeholder-Vertical.jpg" class="img-fluid"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

So in the first column is a bit of text, and then the slider is in the second column. I have set the slider up like so, using center mode

$('.preview-carousel').slick({
    arrows: true,
    variableWidth: true,
    centerMode: true,
    centerPadding: '60px',
    slidesToShow: 3
});

I have set things up in a JSFiddle to demonstrate.

There are a few things I am struggling with. I am using their center mode example they have on their site, but I am using images instead of text. So the opacity on the center image is higher than the other images, like in their example. However, once you scroll through the images and hit the first one again, there is a little pause before the opacity is applied again to the first image. You can see this in my example if you click right six times. In their example they do not have this delay. How can I stop this delay from happening?

The second thing I am wondering is this. I only ever want three images displayed at any one time; the center one and one either side. However, I want the one on the left to bleed into the text in the other column, so essentially the text is sitting on top of part of the faded out image.

Would this be possible?

Any advice appreciated

Thanks

Upvotes: 1

Views: 14232

Answers (2)

grusl83
grusl83

Reputation: 152

I updated your fiddle.

https://jsfiddle.net/z69w9u4g/42/

To fix opacity set "slidesToShow: 5" and "infinite: true" as workaround.

.slick-slide {
  opacity:0.6;
  transition:opacity 300ms ease-out;
}
.slick-center {
   opacity:1!important;
   transition:opacity 300ms ease-in;
}

To display 3 images you need to set container width to 600px (or depending on img size).

.container {
  width: 600px;
}

Whatever you want "to bleed into the text" I don't understand.

Upvotes: 1

Rupal
Rupal

Reputation: 1109

Make this slidesToShow value 5 instead of 3 like-

$('.preview-carousel').slick({
arrows: true,
variableWidth: true,
centerMode: true,
centerPadding: '60px',
slidesToShow: 5
});

This will work fine. example:- https://jsfiddle.net/z69w9u4g/40/

Upvotes: 1

Related Questions