Slick Slider
How do I make an slick slider?
What is a slick slider? How do you make a slick slider? This script and codes were developed by B. on 21 December 2022, Wednesday.
Slick Slider Previews
Slick Slider - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Slick Slider </title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background-color: #f1f1f2;
}
/* Slider */
.slick-slider { position: relative; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent;
}
.slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0;
}
.slick-list:focus { outline: none;
}
.slick-loading .slick-list { background: #fff slick-image-url("ajax-loader.gif") center center no-repeat;
}
.slick-list.dragging { cursor: pointer; cursor: hand;
}
.slick-slider .slick-list,
.slick-track,
.slick-slide,
.slick-slide img { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
}
.slick-track { position: relative; left: 0; top: 0; display: block; zoom: 1;
}
.slick-track:before, .slick-track:after { content: ""; display: table;
}
.slick-track:after { clear: both;
}
.slick-loading .slick-track { visibility: hidden;
}
.slick-slide { float: left; height: 100%; min-height: 1px; display: none;
}
[dir="rtl"] .slick-slide { float: right;
}
.slick-slide img { display: block;
}
.slick-slide.slick-loading img { display: none;
}
.slick-slide.dragging img { pointer-events: none;
}
.slick-initialized .slick-slide { display: block;
}
.slick-loading .slick-slide { visibility: hidden;
}
.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent;
}
/* Arrows */
.slick-prev,
.slick-next { position: absolute; display: block; height: 20px; width: 20px; line-height: 0; font-size: 0; cursor: pointer; background: transparent; color: transparent; top: 50%; margin-top: -10px; padding: 0; border: none; outline: none;
}
.slick-prev:hover, .slick-prev:focus,
.slick-next:hover,
.slick-next:focus { outline: none; background: transparent; color: transparent;
}
.slick-prev:hover:before, .slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before { opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before { opacity: 0.5;
}
.slick-prev:before, .slick-next:before { font-family: 'ui-fusion'; font-size: 20px; line-height: 1; color: gold; opacity: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.slick-prev { left: -25px;
}
[dir="rtl"] .slick-prev { left: auto; right: -25px;
}
.slick-prev:before { content: "\e603";
}
[dir="rtl"] .slick-prev:before { content: "\e601";
}
.slick-next { right: -25px;
}
[dir="rtl"] .slick-next { left: -25px; right: auto;
}
.slick-next:before { content: "\e601";
}
[dir="rtl"] .slick-next:before { content: "\e603";
}
/* Dots */
.slick-slider { margin-bottom: 30px;
}
.slick-dots { position: absolute; bottom: -45px; list-style: none; display: block; text-align: center; padding: 0; width: 100%;
}
.slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 5px; padding: 0; cursor: pointer;
}
.slick-dots li button { border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0; font-size: 0; color: transparent; padding: 5px; cursor: pointer;
}
.slick-dots li button:hover, .slick-dots li button:focus { outline: none;
}
.slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1;
}
.slick-dots li button:before { position: absolute; top: 0; left: 0; content: "."; width: 20px; height: 20px; font-family: 'ui-fusion'; font-size: 0.5em; line-height: 20px; text-align: center; color: white; opacity: 0.8; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before { color: gold; opacity: 1;
}
.carousel-center { margin: 3em auto; max-width: 64.375em; overflow: hidden; background-color: white; padding-top: 1em;
}
.carousel__title { opacity: 0; text-align: center; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; transition: all 1s ease-in-out;
}
.slick-slide img { border-radius: 100%; margin: 0 auto; opacity: 0.8; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; transition: all 1s ease-in-out;
}
.slick-slide.slick-center img { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1);
}
.slick-slide.slick-center .carousel__title { opacity: 1;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="js-carousel-center" class="carousel carousel-center"> <div class="carousel__item"> <img class="carousel__media" src="http://placehold.it/150x150"/> <p class="carousel__title">title here</p> </div> <div class="carousel__item"> <img class="carousel__media" src="http://placehold.it/150x150"/> <p class="carousel__title">title here</p> </div> <div class="carousel__item"> <img class="carousel__media" src="http://placehold.it/150x150"/> <p class="carousel__title">title here</p> </div> <div class="carousel__item"> <img class="carousel__media" src="http://placehold.it/150x150"/> <p class="carousel__title">title here</p> </div> <div class="carousel__item"> <img class="carousel__media" src="http://placehold.it/150x150"/> <p class="carousel__title">title here</p> </div> <div class="carousel__item"> <img class="carousel__media" src="http://placehold.it/150x150"/> <p class="carousel__title">title here</p> </div> <div class="carousel__item"> <img class="carousel__media" src="http://placehold.it/150x150"/> <p class="carousel__title">title here</p> </div> <div class="carousel__item"> <img class="carousel__media" src="http://placehold.it/150x150"/> <p class="carousel__title">title here</p> </div> <button type="button" data-role="none" class="slick-prev">Previous</button> <button type="button" data-role="none" class="slick-next">Next</button>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.3.6/slick.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Slick Slider - Script Codes CSS Codes
body { background-color: #f1f1f2;
}
/* Slider */
.slick-slider { position: relative; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent;
}
.slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0;
}
.slick-list:focus { outline: none;
}
.slick-loading .slick-list { background: #fff slick-image-url("ajax-loader.gif") center center no-repeat;
}
.slick-list.dragging { cursor: pointer; cursor: hand;
}
.slick-slider .slick-list,
.slick-track,
.slick-slide,
.slick-slide img { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
}
.slick-track { position: relative; left: 0; top: 0; display: block; zoom: 1;
}
.slick-track:before, .slick-track:after { content: ""; display: table;
}
.slick-track:after { clear: both;
}
.slick-loading .slick-track { visibility: hidden;
}
.slick-slide { float: left; height: 100%; min-height: 1px; display: none;
}
[dir="rtl"] .slick-slide { float: right;
}
.slick-slide img { display: block;
}
.slick-slide.slick-loading img { display: none;
}
.slick-slide.dragging img { pointer-events: none;
}
.slick-initialized .slick-slide { display: block;
}
.slick-loading .slick-slide { visibility: hidden;
}
.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent;
}
/* Arrows */
.slick-prev,
.slick-next { position: absolute; display: block; height: 20px; width: 20px; line-height: 0; font-size: 0; cursor: pointer; background: transparent; color: transparent; top: 50%; margin-top: -10px; padding: 0; border: none; outline: none;
}
.slick-prev:hover, .slick-prev:focus,
.slick-next:hover,
.slick-next:focus { outline: none; background: transparent; color: transparent;
}
.slick-prev:hover:before, .slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before { opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before { opacity: 0.5;
}
.slick-prev:before, .slick-next:before { font-family: 'ui-fusion'; font-size: 20px; line-height: 1; color: gold; opacity: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.slick-prev { left: -25px;
}
[dir="rtl"] .slick-prev { left: auto; right: -25px;
}
.slick-prev:before { content: "\e603";
}
[dir="rtl"] .slick-prev:before { content: "\e601";
}
.slick-next { right: -25px;
}
[dir="rtl"] .slick-next { left: -25px; right: auto;
}
.slick-next:before { content: "\e601";
}
[dir="rtl"] .slick-next:before { content: "\e603";
}
/* Dots */
.slick-slider { margin-bottom: 30px;
}
.slick-dots { position: absolute; bottom: -45px; list-style: none; display: block; text-align: center; padding: 0; width: 100%;
}
.slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 5px; padding: 0; cursor: pointer;
}
.slick-dots li button { border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0; font-size: 0; color: transparent; padding: 5px; cursor: pointer;
}
.slick-dots li button:hover, .slick-dots li button:focus { outline: none;
}
.slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1;
}
.slick-dots li button:before { position: absolute; top: 0; left: 0; content: "."; width: 20px; height: 20px; font-family: 'ui-fusion'; font-size: 0.5em; line-height: 20px; text-align: center; color: white; opacity: 0.8; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before { color: gold; opacity: 1;
}
.carousel-center { margin: 3em auto; max-width: 64.375em; overflow: hidden; background-color: white; padding-top: 1em;
}
.carousel__title { opacity: 0; text-align: center; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; transition: all 1s ease-in-out;
}
.slick-slide img { border-radius: 100%; margin: 0 auto; opacity: 0.8; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; transition: all 1s ease-in-out;
}
.slick-slide.slick-center img { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1);
}
.slick-slide.slick-center .carousel__title { opacity: 1;
}
Slick Slider - Script Codes JS Codes
$('#js-carousel-center').slick({ centerMode: true, autoplay: true, arrows: true, slidesToShow: 7, centerPadding: '1%', cssEase:'ease-in-out', responsive: [ { breakpoint: 1000, settings: { centerMode: true, centerPadding: '10%', slidesToShow: 6, } }, { breakpoint: 768, settings: { centerMode: true, centerPadding: '1%', slidesToShow: 3, } }, { breakpoint: 480, settings: { centerMode: true, slidesToShow: 1 } } ]
});
| Developer | B. |
| Username | wearebold |
| Uploaded | December 21, 2022 |
| Rating | 3.5 |
| Size | 5,913 Kb |
| Views | 42,504 |
Do you need developer help for Slick Slider?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
B. (wearebold) Script Codes
| Name | Size |
| Simple Push Menu | 3,455 Kb |
| Snap.svg Mask faces | 3,545 Kb |
| Pure CSS3 Robot with JS clocks | 7,759 Kb |
| Polaroid | 4,152 Kb |
| A Pen by B. | 5,519 Kb |
| Slick Slider with Vimeo API - froogaloop | 3,822 Kb |
| Simple Slick Sync Slider | 5,946 Kb |
| Alerts | 2,726 Kb |
| Pure CSS3 Batman Logo | 4,527 Kb |
| Slide Content Module | 6,634 Kb |
Create amazing sales emails with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Replace url via jquery | Serluk | 1,429 Kb |
| Expandable Left Side Bar with jQuery animate | Retrofuturistic | 2,483 Kb |
| Slide out Menu | Rbiggs | 4,936 Kb |
| Scifi-style Interative Form | Aaronchuo | 4,566 Kb |
| Pink expansion tunnel | Vez | 1,738 Kb |
| Three js | Paulq | 2,353 Kb |
| A Pen by John Malc | F789gh | 1,420 Kb |
| Playing with FlexBox | _Billy_Brown | 3,162 Kb |
| CSS Patterns | Alyda | 3,953 Kb |
| Vanilla modal window | Jasonhowmans | 3,554 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!