Loading ...

Slick Carousel Template | Communifire Documentation

Comments (1)

   
mdrain

How can I add a previous arrow to go back to the previous photo?

How can I make the photo advance automatically?

10/31/2019 05:28 PM
 · 
by
   
gskamau

Hey Maxwell,

Use the following updated HTML code and CSS overrides:

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<div class="y-carousel">
{{#each Contents}}
<div>
    <div class="y-slide">
        <img class="y-image" src="{{ContentDetailImageURL}}" alt="{{{Title}}}" />
        <div class="y-info">
            <div class="y-info-content">
                <div class="y-info-content_date">{{DatePublishedString}}</div>
                <h3 class="y-info-content_title"><a href="{{ContentURL}}" title="{{{Title}}}">{{{Title}}}</a></h3>
                <p class="y-info-content_summary">{{{Summary}}}</p>
                <div class="p-user y-info-content_user">
                    <div class="p-avatar">
                        <img src="{{AuthorUserAvatarImageURL}}" alt="{{AuthorUserDisplayName}}">
                    </div>
                    <div class="p-user-info">
                        <div class="p-user-name">
                            <a class="axero-user-card-link" data-user="{{{AuthorUserID}}}" href="{{AuthorUserProfileURL}}">{{AuthorUserDisplayName}}</a>
                        </div>
                        <div class="p-publish-date">{{{SpaceName}}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{{/each}}
</div>

<script type="text/javascript">

$(document).ready(function(){
    $('.y-carousel').slick({
      dots: true,
      infinite: true,
      speed: 300,
      slidesToShow: 1,
      adaptiveHeight: true,
      arrows: true,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 2000
    });
});

</script>

 

.y-carousel{margin-bottom:30px;}
.y-carousel .y-slide{position: relative;padding-bottom: 56.25%;padding-top: 25px;height: 0;overflow: hidden;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}
.y-carousel .y-slide img.y-image {display: block;margin-top: -25px;position: absolute;top: 0;left: 0;right: 0;bottom: 0;width: 100%;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}
.y-carousel .y-slide .y-info{position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.21) 21%, rgba(0,0,0,1) 100%);background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.21) 21%,rgba(0,0,0,1) 100%);background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0.21) 21%,rgba(0,0,0,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#000000',GradientType=0 );}
.y-carousel .y-slide .y-info .y-info-content{max-width: 600px;position:absolute;bottom: 0;left: 0;right: 0;color: #fff;padding: 45px;box-sizing: border-box;}
.y-carousel .y-slide .y-info .y-info-content .y-info-content_date{font-size:15px;}
.y-carousel .y-slide .y-info .y-info-content .y-info-content_title{font-size: 34px;font-weight: 600;}
.y-carousel .y-slide .y-info .y-info-content .y-info-content_title a{color:#fff;}
.y-carousel .y-slide .y-info .y-info-content .y-info-content_summary{font-size:17px}
.y-carousel .y-slide .y-info .y-info-content .y-info-content_user{margin-top: 20px;}

.slick-arrow::after{content:'';position:absolute;border:2px solid #fff;width:14px;height:14px;top:17px;left:20px;border-width:0 0 2px 2px;left:auto;right:22px;-webkit-transform:rotate(-135deg);-moz-transform:rotate(-135deg);-ms-transform:rotate(-135deg);-o-transform:rotate(-135deg);transform:rotate(-135deg);}
.slick-arrow{-webkit-transition:opacity .8s ease-in-out;-moz-transition:opacity .8s ease-in-out;transition:opacity .8s ease-in-out;border:0;width:52px;height:52px;border-radius:0;font-size:19px;line-height:52px;font-weight:bolder;z-index:98;text-indent:-9999px;overflow:hidden;padding:0;margin:0;margin-top:0px;background-color:rgba(0,0,0,0);color:#fff;cursor:pointer;position:absolute;top:42%;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}
.slick-arrow.slick-prev{left:0;}
.slick-arrow.slick-next{right:0;}
.slick-arrow.slick-prev:after{left:21px;border-width:2px 2px 0 0;}
.slick-arrow.slick-next:after{border-width:0 0 2px 2px;right:21px;}
.slick-dots{position:absolute;top:0;right:0;list-style:none;}
.slick-dots li{display:inline;}
.slick-dots li button{border:0;border-radius:400px;text-indent:-999px;content:'';height:3px;width:23px;margin-right:10px;color:transparent;}
.slick-dots li.slick-active button{background:#000;}

@media (max-width: 767px) {
    
.y-carousel .y-slide{overflow: auto;padding: 0;height: auto;-webkit-border-top-left-radius: 4px;-webkit-border-top-right-radius: 4px;-moz-border-radius-topleft: 4px;-moz-border-radius-topright: 4px;border-top-left-radius: 4px;border-top-right-radius: 4px;}
.y-carousel .y-slide img.y-image{position: relative;-webkit-border-top-left-radius: 4px;-webkit-border-top-right-radius: 4px;-moz-border-radius-topleft: 4px;-moz-border-radius-topright: 4px;border-top-left-radius: 4px;border-top-right-radius: 4px;}
.y-carousel .y-slide .y-info{position: relative;display: block;background: #000;-webkit-border-bottom-right-radius: 4px;-webkit-border-bottom-left-radius: 4px;-moz-border-radius-bottomright: 4px;-moz-border-radius-bottomleft: 4px;border-bottom-right-radius: 4px;border-bottom-left-radius: 4px;}
.y-carousel .y-slide .y-info .y-info-content{position: relative;padding: 20px;}

.y-carousel .y-slide .y-info .y-info-content .y-info-content_date{font-size:13px;}
.y-carousel .y-slide .y-info .y-info-content .y-info-content_title{font-size: 20px;font-weight: 600;margin:0;line-height: normal;}
.y-carousel .y-slide .y-info .y-info-content .y-info-content_summary{font-size:15px;margin-top: 5px;}

.slick-arrow{background-color: rgba(0,0,0,.8);}

}

For the previous arrow, I removed CSS code that hid the left arrow.

For autoplay, I added two settings in the HTML to enable autoplay: autoplay: true and autoplaySpeed: 2000 .

Grace

10/31/2019 06:11 PM
 · 
by
   
mdrain

Thanks, Grace. Just in time for our Halloween Fun Carousel!

10/31/2019 06:53 PM
 · 
by

Pages

Intranet Software