Documents
- Title
- slick #2. Carousel Slider
- Description
- slick is responsive jQuery slider plugin.
Here, carousel slider setting of slick are posted.
- Category
- Slider
- Include Files
<!-- Add jQuery and slick --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js"></script>
- Basic markup
<script> $(function () { $('.slider').slick({ option }); }); </script>
- Attachment Table
slick Options
Property Type Default Description accessibility boolean true Enables tabbing and arrow key navigation adaptiveHeight boolean false Enables adaptive height for single slide horizontal carousels. autoplay boolean false Enables Autoplay autoplaySpeed int(ms) 3000 Autoplay Speed in milliseconds arrows boolean true Prev/Next Arrows asNavFor string null Set the slider to be the navigation of other slider (Class or ID Name) appendArrows string $(element) Change where the navigation arrows are attached (Selector, htmlString, Array, Element, jQuery object) appendDots string $(element) Change where the navigation dots are attached (Selector, htmlString, Array, Element, jQuery object) prevArrow string (html|jQuery selector) | object (DOM node|jQuery object) <button type="button" class="slick-prev">Previous</button> Allows you to select a node or customize the HTML for the "Previous" arrow. nextArrow string (html|jQuery selector) | object (DOM node|jQuery object) <button type="button" class="slick-next">Next</button> Allows you to select a node or customize the HTML for the "Next" arrow. centerMode boolean false Enables centered view with partial prev/next slides. Use with odd numbered slidesToShow counts. centerPadding string '50px' Side padding when in center mode (px or %) cssEase string 'ease' CSS3 Animation Easing customPaging function n/a Custom paging templates. See source for use example. dots boolean false Show dot indicators dotsClass string 'slick-dots' Class for slide indicator dots container draggable boolean true Enable mouse dragging fade boolean false Enable fade focusOnSelect boolean false Enable focus on selected element (click) easing string 'linear' Add easing for jQuery animate. Use with easing libraries or default easing methods edgeFriction integer 0.15 Resistance when swiping edges of non-infinite carousels infinite boolean true Infinite loop sliding initialSlide integer 0 Slide to start on lazyLoad string 'ondemand' Set lazy loading technique. Accepts 'ondemand' or 'progressive' mobileFirst boolean false Responsive settings use mobile first calculation pauseOnFocus boolean true Pause Autoplay On Focus pauseOnHover boolean true Pause Autoplay On Hover pauseOnDotsHover boolean false Pause Autoplay when a dot is hovered respondTo string 'window' Width that responsive object responds to. Can be 'window', 'slider' or 'min' (the smaller of the two) responsive object none Object containing breakpoints and settings objects (see demo). Enables settings sets at given screen width. Set settings to "unslick" instead of an object to disable slick at a given breakpoint. rows int 1 Setting this to more than 1 initializes grid mode. Use slidesPerRow to set how many slides should be in each row. slide element '' Element query to use as slide slidesPerRow int 1 With grid mode intialized via the rows option, this sets how many slides are in each grid row. dver slidesToShow int 1 # of slides to show slidesToScroll int 1 # of slides to scroll speed int(ms) 300 Slide/Fade animation speed swipe boolean true Enable swiping swipeToSlide boolean false Allow users to drag or swipe directly to a slide irrespective of slidesToScroll touchMove boolean true Enable slide motion with touch touchThreshold int 5 To advance slides, the user must swipe a length of (1/touchThreshold) * the width of the slider useCSS boolean true Enable/Disable CSS Transitions useTransform boolean true Enable/Disable CSS Transforms variableWidth boolean false Variable width slides vertical boolean false Vertical slide mode verticalSwiping boolean false Vertical swipe mode rtl boolean false Change the slider's direction to become right-to-left waitForAnimate boolean true Ignores requests to advance the slide while animating zIndex number 1000 Set the zIndex values for slides, useful for IE9 and lower
- Related
Source Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Add jQuery and slick -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js"></script>
<title>slick #2. Carousel Slider</title>
<style>
.slick-wrapper {
max-width: 720px;
margin: 0 auto 60px;
}
[class^='carousel-'] {
margin: 0 20px 30px 20px;
padding: 0;
}
.slick-prev:before,
.slick-next:before {
color: #000;
}
.slide-image {
box-sizing: border-box;
height: auto;
padding: 10px;
}
.carousel-3 .slide-image {
transition: .25s;
opacity: .5;
}
.carousel-3 .slick-center .slide-image {
transform: scale(1.2);
opacity: 1;
}
.carousel-4 .slide-content {
margin: 5px;
padding: 1em;
transition: .25s;
opacity: .5;
border: 1px solid #fff;
background: #fff;
}
.carousel-4 .slide-content img {
float: right;
width: 72px;
height: auto;
padding: 0 0 5px 5px;
}
.carousel-4 .slick-center .slide-content {
opacity: 1;
border: 1px solid #ccc;
box-shadow: 0 1px 3px rgba(0, 0, 0, .12),
0 1px 2px rgba(0, 0, 0, .24);
}
.carousel-4 .slide-content {
position: relative;
}
.carousel-4 .slide-content::after {
font-size: 13px;
position: absolute;
right: 5px;
bottom: 5px;
content: attr(style);
color: #666;
}
</style>
</head>
<body>
<header>
<h1 class="dlw-title">slick
<small>#2. Carousel Slider</small>
</h1>
<p class="dlw-description">slick is responsive jQuery slider plugin.
<br> Here, carousel slider setting of slick are posted.</p>
</header>
<section>
<h2 class="dlw-subtitle">[1] Basic Carousel</h2>
<script>
$(function () {
$('.carousel-1').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1
});
});
</script>
<div class="slick-wrapper">
<div class="carousel-1">
<img class="slide-image" src="images/photo01-s.jpg" />
<img class="slide-image" src="images/photo02-s.jpg" />
<img class="slide-image" src="images/photo03-s.jpg" />
<img class="slide-image" src="images/photo04-s.jpg" />
<img class="slide-image" src="images/photo05-s.jpg" />
<img class="slide-image" src="images/photo06-s.jpg" />
<img class="slide-image" src="images/photo07-s.jpg" />
<img class="slide-image" src="images/photo08-s.jpg" />
<img class="slide-image" src="images/photo09-s.jpg" />
<img class="slide-image" src="images/photo10-s.jpg" />
</div>
</div>
</section>
<section>
<h2 class="dlw-subtitle">[2] Responsive Change</h2>
<script>
$(function () {
$('.carousel-2').slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
});
</script>
<div class="slick-wrapper">
<div class="carousel-2">
<img class="slide-image" src="images/photo01-s.jpg" />
<img class="slide-image" src="images/photo02-s.jpg" />
<img class="slide-image" src="images/photo03-s.jpg" />
<img class="slide-image" src="images/photo04-s.jpg" />
<img class="slide-image" src="images/photo05-s.jpg" />
<img class="slide-image" src="images/photo06-s.jpg" />
<img class="slide-image" src="images/photo07-s.jpg" />
<img class="slide-image" src="images/photo08-s.jpg" />
<img class="slide-image" src="images/photo09-s.jpg" />
<img class="slide-image" src="images/photo10-s.jpg" />
</div>
</div>
</section>
<section>
<h2 class="dlw-subtitle">[3] Center Mode</h2>
<script>
$(function () {
$('.carousel-3').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
centerMode: true,
centerPadding: '60px'
});
});
</script>
<div class="slick-wrapper">
<div class="carousel-3">
<img class="slide-image" src="images/photo01-s.jpg" />
<img class="slide-image" src="images/photo02-s.jpg" />
<img class="slide-image" src="images/photo03-s.jpg" />
<img class="slide-image" src="images/photo04-s.jpg" />
<img class="slide-image" src="images/photo05-s.jpg" />
<img class="slide-image" src="images/photo06-s.jpg" />
<img class="slide-image" src="images/photo07-s.jpg" />
<img class="slide-image" src="images/photo08-s.jpg" />
<img class="slide-image" src="images/photo09-s.jpg" />
<img class="slide-image" src="images/photo10-s.jpg" />
</div>
</div>
</section>
<section>
<h2 class="dlw-subtitle">[4] Variable Width</h2>
<script>
$(function () {
$('.carousel-4').slick({
infinite: true,
slidesToShow: 1,
centerMode: true,
centerPadding: '60px',
variableWidth: true
});
});
</script>
<div class="slick-wrapper">
<div class="carousel-4">
<div>
<div class="slide-content" style="width: 200px;">
<h4>Look at the keyboard placed on the desk from the side.</h4>
<img src="images/photo01-t.jpg" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
<div>
<div class="slide-content" style="width: 250px;">
<h4>Dark coffee and notepad.</h4>
<img src="images/photo02-t.jpg" />
<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis
enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
</div>
</div>
<div>
<div class="slide-content" style="width: 300px;">
<h4>Around the desk unified with white.</h4>
<img src="images/photo03-t.jpg" />
<p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis
pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p>
</div>
</div>
<div>
<div class="slide-content" style="width: 200px;">
<h4>Watch keyboard and mouse closely.</h4>
<img src="images/photo04-t.jpg" />
<p>Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend
ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
</div>
</div>
<div>
<div class="slide-content" style="width: 275px;">
<h4>Focus on the mouse.</h4>
<img src="images/photo05-t.jpg" />
<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies
nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
</div>
</div>
<div>
<div class="slide-content" style="width: 250px;">
<h4>Work is completed with dual monitor.</h4>
<img src="images/photo06-t.jpg" />
<p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing
sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.</p>
</div>
</div>
<div>
<div class="slide-content" style="width: 200px;">
<h4>Writing the manuscript based on the memo.</h4>
<img src="images/photo07-t.jpg" />
<p>Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla
mauris sit amet nibh.</p>
</div>
</div>
<div>
<div class="slide-content" style="width: 250px;">
<h4>I am not working overtime.</h4>
<img src="images/photo08-t.jpg" />
<p>Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque
ut, mollis sed, nonummy id, metus.</p>
</div>
</div>
<div>
<div class="slide-content" style="width: 300px;">
<h4>Watch the desktop from directly above.</h4>
<img src="images/photo09-t.jpg" />
<p>Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi
consectetuer lacinia. Nam pretium turpis et arcu.</p>
</div>
</div>
<div>
<div class="slide-content" style="width: 200px;">
<h4>Always put coffee next to the computer.</h4>
<img src="images/photo10-t.jpg" />
<p>Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices
mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing.
Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium
libero. Cras id dui. Aenean ut</p>
</div>
</div>
</div>
</div>
</section>
<section>
<h2 class="dlw-subtitle">[5] Synchronize slider and carousel</h2>
<script>
$(function () {
$('.slider-5').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.carousel-5'
});
$('.carousel-5').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-5',
dots: true,
centerMode: true,
focusOnSelect: true
});
});
</script>
<div class="slick-wrapper">
<div class="slider-5">
<img class="slide-image" src="images/photo01-m.jpg" />
<img class="slide-image" src="images/photo02-m.jpg" />
<img class="slide-image" src="images/photo03-m.jpg" />
<img class="slide-image" src="images/photo04-m.jpg" />
<img class="slide-image" src="images/photo05-m.jpg" />
<img class="slide-image" src="images/photo06-m.jpg" />
<img class="slide-image" src="images/photo07-m.jpg" />
<img class="slide-image" src="images/photo08-m.jpg" />
<img class="slide-image" src="images/photo09-m.jpg" />
<img class="slide-image" src="images/photo10-m.jpg" />
</div>
<div class="carousel-5">
<img class="slide-image" src="images/photo01-s.jpg" />
<img class="slide-image" src="images/photo02-s.jpg" />
<img class="slide-image" src="images/photo03-s.jpg" />
<img class="slide-image" src="images/photo04-s.jpg" />
<img class="slide-image" src="images/photo05-s.jpg" />
<img class="slide-image" src="images/photo06-s.jpg" />
<img class="slide-image" src="images/photo07-s.jpg" />
<img class="slide-image" src="images/photo08-s.jpg" />
<img class="slide-image" src="images/photo09-s.jpg" />
<img class="slide-image" src="images/photo10-s.jpg" />
</div>
</section>
</body>
</html>Comment
Search
- Style Design
- Text Style DesignCSS
Here, design samples of various effects to text are posted.
- Headline (Heading) Style DesignCSS
The headline is the text indicating the nature of the article below it.
Here, design samples of headline using style sheets are posted. - OL (Ordered List) Style DesignCSS
The HTML <ol> element represents an ordered list of items.
Here, design samples of ol using style sheets are posted. - HR (Separator Line) Style DesignCSS
The HTML <hr> element represents a thematic break between paragraph-level elements.
Here, design samples of hr using style sheets are posted. - Box Shadow Style DesignCSS
The box-shadow CSS property is used to add shadow effects around an element's frame.
Here, design samples of box-shadow property using style sheets are posted.
- Layout
- How to specify a breakpoint and switch imagesJS
Using
<picture> andsrcset , it is a method of switching images according to screen size. It also corresponds to retina.
In this example, Picturefill is added for IE. - Grid LayoutCSS
Grid is the value of the CSS display property.
Here, layout samples of grid property are posted. - FlexCSS
Flex is the value of the CSS display property.
- Link & Button
- Bootstrap ButtonCSS
It is a standard button design of Bootstrap Framework.
- Hover.cssCSS
Hover.css is a style-sheet collection of hover effects.
- Button.cssCSS
Button.css is collection of CSS3 button animations.
- Card
- Bootstrap CardCSS
It is a standard Card design of Bootstrap Framework.
- Text
- Arctext.jsjQuery
Arctext.js is a jQuery plugin that causes a string to curve along a specified circle radius.
- Lettering.jsjQuery
Lettering.js is a jQuery plugin that encloses a specified character string with one character, one word, one column by <span> tag.
- Textillate.jsjQuery
Textillate.js is a jQuery plugin that adds In / Out animation effects to text.
- FitText.jsjQuery
FitText.js is jQuery plugin that fits the font size according to the width of the parent element.
- Media
- FeedEkjQuery
FeedEk is a jQuery plugin that parses RSS and Atom feeds and displays them.
- YouTube Embed
Introduction of various embedment methods of YouTube.
- FitVids.jsjQuery
FitVids is a jQuery plug-in that converts YouTube videos embedded with iframe into responsive.
- xZoomjQuery
xZoom is a jQuery plug-in that shows a zoom preview of the image.
It is possible to customize the preview position and zoom. - Instagram.cssCSS
Instagram.css is a stylesheet set that filters photos like instagram.
- Date
- Moment.jsJS
Moment.js is a javascript that processes and displays date and time.
- Bootstrap Material DatePickerjQuery
Bootstrap Material DatePicker is jQuery data picker plugin using Moment.js.
- Table
- MultifilterjQuery
Multifilter is jQuery Table Filtering Plugin.
- Flex TableCSS
Responsive table using "display: flex;".
Not supported for rowspan. - Grid TableCSS
Responsive table using "display: grid;".
Not supported for rowspan. - Bootstrap TableCSS
It is a standard Table design of Bootstrap Framework.
- Form
- jQuery Mask PluginjQuery
jQuery Mask Plugin is jQuery plugin that make mask (validation) on form field.
- Select2 #1. Basic SettingjQuery
Select2 is a jquery plugin that makes select form more advanced.
Here is the basic usage of Select2. - jQuery SearcherjQuery
jQuery Searcher is jQuery search/filtering plugin that supports various markups.
- Slider
- Bootstrap CarouseljQuery
It is a standard Carousel of Bootstrap Framework.
- FlexSlider #1. Single SliderjQuery
FlexSlider is responsive jQuery slider plugin.
Here, basic single slider setting of Flexslider are posted. - FlexSlider #2. Carousel SliderjQuery
FlexSlider is responsive jQuery slider plugin.
Here, basic carousel slider setting of Flexslider are posted. - slick #1. Single SliderjQuery
slick is responsive jQuery slider plugin.
Here, basic single slider setting of slick are posted. - slick #2. Carousel SliderjQuery
slick is responsive jQuery slider plugin.
Here, carousel slider setting of slick are posted.
- Lightbox
- fancyBox #1. basic image lightboxjQuery
fancyBox is jQuery lightbox plugin.
Here, basic image lightbox setting of fancyBox are posted. - fancyBox #2. media lightboxjQuery
fancyBox is jQuery lightbox plugin.
Here, YouTube, Vimeo, Instagram, Google Maps, inline HTML, iframe lightbox setting of fancyBox are posted. - Magnific Popup #1. basic image lightboxjQuery
Magnific Popup is jQuery lightbox plugin.
Here, basic image lightbox setting of Magnific Popup are posted. - Magnific Popup #2. media lightboxjQuery
Magnific Popup is jQuery lightbox plugin.
Here, YouTube, Vimeo, Google Maps, inline HTML lightbox setting of Magnific Popup are posted. - Magnific Popup #3. CSS3-based animation effectsjQuery
Since Magnific Popup does not incorporate animation effects by standard, you need to set it yourself.
Here we summarize the CSS3-based animation settings.
- Navigation
- animsitionjQuery
animsition is a jQuery plugin that adds an in/out animation effect at the time of page transition.
- GreedyNavjQuery
GreedyNav is a responsive navigation menu using jQuery which switches over the items that protruded when the screen was scaled down to dropdown.
- GridTabjQuery
GridTab is a lightweight jQuery plugin to create grid based responsive tabs.
- jQuery.NiceScrolljQuery
jQuery.NiceScroll is a jQuery plugin that extends scroll display and functions.
- metisMenujQuery
metisMenu is a jQuery plugin that expands vertical and vertical menus.
- fullPage.js #1. basic fullscreen scrollingjQuery
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, basic fullscreen scrolling of fullPage.js are posted. - fullPage.js #2. fullscreen scrolling with menujQuery
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, navigation menu is displayed.. - Offside.js #1. Basic Off-canvasJS
Offside.js is a JavaScript kit that expands off-canvas.
This is a sample where the left side off-canvas expands. - Offside.js #2. Multiple Off-canvasJS
Offside.js is a JavaScript kit that expands off-canvas.
This is a sample that expands multiple off-canvases. - Filterizr #1. Basic FilteringjQuery
Filterizr is a jQuery plugin that sorts, shuffles, searches for the items in the container.
This is a basic sample without setting options. - Filterizr #2. Advanced FilteringjQuery
Filterizr is a jQuery plugin that sorts, shuffles, searches for the items in the container.
This is a sample of more advanced setting of Filterizr.
- Animation
- animsitionjQuery
animsition is a jQuery plugin that adds an in/out animation effect at the time of page transition.
- Textillate.jsjQuery
Textillate.js is a jQuery plugin that adds In / Out animation effects to text.
- ScrollajQuery
Scrolla is jQuery scroll animation plugin.
- Hover.cssCSS
Hover.css is a style-sheet collection of hover effects.
- Animate.cssCSS
Animate.css is a style-sheet collection of animation effects.
- jQuery Easing PluginjQuery
jQuery Easing Plugin is a plugin to extend the easing (animation effect) of jQuery.
The easing of element is posted.
- Background
- fullPage.js #1. basic fullscreen scrollingjQuery
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, basic fullscreen scrolling of fullPage.js are posted. - fullPage.js #2. fullscreen scrolling with menujQuery
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, navigation menu is displayed.. - jquery.mb.YTPlayerjQuery
jQuery.mb.YTPlayer is jQuery Background player plugin.
- Modal / Tooltip
- Hint.cssCSS
Hint.css is a style sheet set for tooltip.
You can display tooltip just by adding class name. - ProtipjQuery
Protip is a jQuery plugin that generates tooltips.
Set the position, size, etc. of the tooltip only with data attribute.
- Social
- Framework
- Bootstrap CarouseljQuery
It is a standard Carousel of Bootstrap Framework.
- Bootstrap CardCSS
It is a standard Card design of Bootstrap Framework.
- Bootstrap ButtonCSS
It is a standard button design of Bootstrap Framework.
- Bootstrap TableCSS
It is a standard Table design of Bootstrap Framework.
- Cheat Sheet
- HTML5 Cheat Sheet
HTML5 Cheat Sheet by Make A Website Hub
- CSS3 Cheat Sheet
CSS3 Cheat Sheet by Smashing Magazine
- Visual Studio Code Keyboard Shortcuts
This is the Visual Studio Code default keyboard shortcut list.
- GreenSock Cheat Sheet
Cheese sheet of TweenMAX, TweenLite, TimelineLite, TimelineMax by GreenSock.
- Other
- Google Search
On this page you can search for codes collectively.
- Design News
It is a news feed about design.