Jump to content

Automatic combine manual slideshow with dot


CL226
 Share

Recommended Posts

I need the code to add the dot under my slide, what should I add in?

Here is my code:

<style>

.slick-prev, .slick-next {
  width: 30px !important;
  height: 30px !important;
  }
  .autoplay .slick-prev {
    position: absolute;
    top: 110%;
    left: 44%;
    right: auto;
    z-index: 1;
  }
  .autoplay .slick-next {
    position: absolute;
    top: 110%;
    right: 44%;
    left: auto;
    z-index: 1;
  }
  .autoplay .slick-prev, .autoplay .slick-prev:focus {
    background: url("/data/cms/images/previous(1).png") no-repeat 0px 0px;
    background-size: 30px;
  }
  .autoplay .slick-prev:hover, .autoplay .slick-prev:active {
    background: url("/data/cms/images/hover_previous(2).png") no-repeat 0px 0px;
    background-size: 30px;
  }
  .autoplay .slick-next, .autoplay .slick-next:focus {
    background: url("/data/cms/images/next(1).png") no-repeat 0px 0px;
    background-size: 30px;
  }
  .autoplay .slick-next:hover, .autoplay .slick-next:active {
    background: url("/data/cms/images/hover_next(2).png") no-repeat 0px 0px;
    background-size: 30px;
  }
  .autoplay .dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }
  .autoplay .active, .dot:hover {
    background-color: #717171;
  }
</style>
<script>
  $(document).ready(function(){
    $('.autoplay').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplay: true,
      fade:true,
      autoplaySpeed: 1800,
      responsive: [
        {
          breakpoint: 1280,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }
      ]
    });
  });
</script>

Link to comment
Share on other sites

  • 3 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...