CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Shahid Amin
Shahid Amin

Reputation: 41

Controlling slick slider with external links

I am using slick slider. I have created two div's. Here is details :)

<a href="#" class="Full_Left"></a>
<a href="#" class="Full_Right"></a>

This is the css for these two divs

.Full_Left {
  position: absolute;
  top: 0px;
  width: 50%;
  height: 100%;
  background: rgba(34, 25, 165, 0.5);
  left: 0px;
  z-index: 2;

}

.Full_Left:hover {
  cursor: url(../images/right.svg), auto;
}

.Full_Right {
  position: absolute;
  top: 0px;
  width: 50%;
  height: 100%;
  background: rgba(216, 33, 33, 0.5);
  right: 0px;
  z-index: 2;
}

.Full_Right:hover {
  cursor: url(../images/left.svg), auto;
}

as you can see now my div's are on full screen and I want to control the slider with the links I have created so that when user bring mouse on 50% he have right arrow and same for left side and all of the slider content will be below these two layers.

I am wondering this is possible with "Slick" or not ? Thanks in advance.

Upvotes: 1

Views: 2660

Answers (2)

Evan
Evan

Reputation: 121

I had a similar use case to this, though with a twist. Finding this question pointed me in the right direction, and my answer below does address controlling a Slick slider with external links.

I have a Slick slider in the right column set to position: fixed and a longer story in the right column that scrolls. Each of the slides in the slider corresponds to a section of the story, set apart by <h3> tags. I wanted a link next to each header that set the slideshow to the corresponding slide when clicked. To accomplish this, I added a button at the end of each section header:

<h3>Section Header <button data-slick-index="0" class="slide-to"><i class="fa fa-camera-retro" aria-hidden="true"></i></button></h3>

The data-slick-index property (is it a property?) was set to the slick-index of the corresponding slide. Then just below my Slick init JS I placed the following:

$(".slide-to").bind("click", function() {
    var slidx = $(this).attr('data-slick-index');
    $('#slideshow').slick('slickGoTo', slidx); 
});

Works like a charmp*.

That's a charm and a champ combined.

Upvotes: 2

Shahid Amin
Shahid Amin

Reputation: 41

I have solved this problem by my self. here is my working code

<script type="text/javascript">
    $('.Full_Right').click(function(e) {
        $('#Contrroll').slick('slickNext');
    });

    $('.Full_Left').click(function(e) {
        $('#Contrroll').slick('slickPrev');
    });
</script>

:)

Upvotes: 1

Related Questions