{"id":5062,"date":"2020-06-27T10:52:00","date_gmt":"2020-06-27T10:52:00","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=5062"},"modified":"2020-08-21T11:07:30","modified_gmt":"2020-08-21T11:07:30","slug":"tutorial-create-a-carousel-using-css-scroll-snap-and-javascript","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/code\/tutorial-create-a-carousel-using-css-scroll-snap-and-javascript\/","title":{"rendered":"Tutorial: Create a Carousel using CSS Scroll Snap and JavaScript"},"content":{"rendered":"\n

This tutorial <\/strong>will help you create a responsive carousel<\/strong> using the CSS scroll-snap<\/strong> property and very little JavaScript<\/strong> for navigation. You can use it for products display, or as a gallery, or for your testimonials \u2013 like the example in this tutorial.<\/p>\n\n\n\n

So here is what we will be creating:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

This is really just a horizontal scroll section but when you scroll, it \u201csnaps\u201d (auto-adjusts the position of the scroll container) to ensure it displays the full item \u2013 making it behave like a carousel. You can also use the arrows to display next and previous items, which requires JavaScript. You need to have some basic knowledge of HTML, CSS and JavaScript to follow along. On the way, you will learn about the CSS scroll-snap properties.<\/p>\n\n\n\n

Let\u2019s get started.<\/strong><\/p>\n\n\n\n

Setting up<\/h2>\n\n\n\n

Create a blank HTML document and name it index.html<\/code>. Add the basic HTML skeleton. If you use Visual Studio Code, all you need to do is type \u201c!\u201d and hit enter. You will end up with this.<\/p>\n\n\n\n

<!<\/code>DOCTYPE<\/code> html><\/code><<\/code>html<\/code> lang<\/code>=<\/code>\"en\"<\/code>><\/code><<\/code>head<\/code>><\/code><<\/code>meta<\/code> charset<\/code>=<\/code>\"UTF-8\"<\/code>><\/code><<\/code>meta<\/code> name<\/code>=<\/code>\"viewport\"<\/code> content<\/code>=<\/code>\"width=device-width, initial-scale=1.0\"<\/code>><\/code><<\/code>title<\/code>>Document<\/<\/code>title<\/code>><\/code><\/<\/code>head<\/code>><\/code><<\/code>body<\/code>><\/code> <\/<\/code>body<\/code>><\/code><\/<\/code>html<\/code>><\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

The font used in this demo is \u2018Noto Sans\u2019. Let\u2019s embed this font from Google fonts. Add this CDN link below the title tag to embed regular and italic styles of this font.<\/p>\n\n\n\n

<<\/code>link<\/code> href<\/code>=<\/code>\"https:\/\/fonts.googleapis.com\/css2?family=Noto<\/a>+Sans:ital,wght@0,400;0,700;1,400&display=swap\"<\/code> rel<\/code>=<\/code>\"stylesheet\"<\/code>><\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Create your stylesheet and name it style.css<\/code>. Link the stylesheet to your HTML document below the Google fonts CDN link using<\/p>\n\n\n\n

<<\/code>link<\/code> rel<\/code>=<\/code>\"stylesheet\"<\/code> href<\/code>=<\/code>\"style.css\"<\/code>><\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

I have downloaded three portrait images from Pexels<\/a> and cropped them square for this demo. You can choose to include your own. Name them testimonial1.jpg<\/code>, testimonial2.jpg<\/code> and testimonial3.jpg<\/code>.<\/p>\n\n\n\n

Creating a basic scroller<\/h3>\n\n\n\n

Let\u2019s first create a simple horizontal scroller with three items with width same as that of the scroll container.<\/p>\n\n\n\n

HTML<\/h4>\n\n\n\n

Add this markup within body tag in your HTML file:<\/p>\n\n\n\n

<<\/code>div<\/code> class<\/code>=<\/code>\"testimonials\"<\/code>><\/code><<\/code>div<\/code> class<\/code>=<\/code>\"scroller\"<\/code>><\/code><<\/code>div<\/code> class<\/code>=<\/code>\"item\"<\/code>><\/code>Item 1<\/code><\/<\/code>div<\/code>><\/code><<\/code>div<\/code> class<\/code>=<\/code>\"item\"<\/code>><\/code>Item 2<\/code><\/<\/code>div<\/code>><\/code><<\/code>div<\/code> class<\/code>=<\/code>\"item\"<\/code>><\/code>Item 3<\/code><\/<\/code>div<\/code>><\/code><\/<\/code>div<\/code>><\/code><\/<\/code>div<\/code>><\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Here, the testimonials<\/code> div acts as the wrapper, within which is the horizontal scroller<\/code>, and then three item divs<\/code>.<\/p>\n\n\n\n

CSS<\/h4>\n\n\n\n

In style.css<\/code>, begin with some common styles for all elements:<\/p>\n\n\n\n

* {<\/code>margin<\/code>: <\/code>0<\/code>;<\/code>padding<\/code>: <\/code>0<\/code>;<\/code>box-sizing<\/code>: <\/code>border-box<\/code>;<\/code>}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Add these styles to the body<\/code> element:<\/p>\n\n\n\n

body {<\/code>font-family<\/code>: <\/code>'Noto Sans'<\/code>, <\/code>sans-serif<\/code>;<\/code>font-size<\/code>: <\/code>1em<\/code>;<\/code>color<\/code>: <\/code>#4A5568<\/code>;<\/code>}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Restrict the width of the testimonials<\/code> wrapper to about 800px and center it.<\/p>\n\n\n\n

.testimonials {<\/code>max-width<\/code>: <\/code>800px<\/code>;<\/code>margin<\/code>: <\/code>auto<\/code>;<\/code>}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Add these basics styles to see the scroller at work.<\/p>\n\n\n\n

.scroller {<\/code>overflow-x<\/code>: <\/code>scroll<\/code>;<\/code>display<\/code>: <\/code>flex<\/code>;<\/code>}<\/code>.item {<\/code>min-width<\/code>: <\/code>100%<\/code>;<\/code>min-height<\/code>: <\/code>200px<\/code>; <\/code>\/* To start with *\/<\/code>background-color<\/code>: <\/code>#EDF2F7<\/code>; <\/code>\/* For demo *\/<\/code>}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

With this, you can see a horizontal scroll section like this.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Scroll Snapping<\/h3>\n\n\n\n

With CSS scroll snap, it is possible to enforce the scroll position (smoothly moving to the enforced position) once the user stops scrolling. This works by applying two primary properties \u2013 scroll-snap-type<\/code> and scroll-snap-align<\/code>.<\/p>\n\n\n\n

The scroll-snap-type<\/strong> property is applied on the parent<\/strong> container (In our case, it\u2019s the scroller<\/code> div). It takes two arguments \u2013 the snap direction ( x | y | both<\/code> ) and the snap behavior ( mandatory | proximity<\/code> ). We need to use x<\/code> for the direction because we are scrolling horizontally. For the behavior, mandatory<\/code> means the browser has to snap to the position, while proximity<\/code> is less strict. We will use mandatory<\/code>.<\/p>\n\n\n\n

The scroll-snap-align<\/strong> property is applied to the child items. It determines the snap point. It takes one or two arguments for x<\/code> or\/and y<\/code> direction ( none | start | end | center<\/code> ). In our case, this property can have any value except for none<\/code>, because our items are 100% width of the parent container. You can dig deeper into the CSS Scroll Snap concept here<\/a>.<\/p>\n\n\n\n

Add these properties to the scroller<\/code> and item<\/code> divs.<\/p>\n\n\n\n

.scroller {<\/code>\/* Existing styles here *\/<\/code>scroll-snap-type: x mandatory;<\/code>}<\/code>.item {<\/code>\/* Existing styles here *\/<\/code>scroll-snap-align: <\/code>center<\/code>;<\/code>}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

That\u2019s all you need for the magic! Now check your browser and scroll horizontally. You will notice that the browser strictly snaps to display a full item once you stop scrolling at any point. With this, the primary carousel behavior is achieved.<\/p>\n\n\n\n

Adding content<\/h3>\n\n\n\n

Let\u2019s add some content to the items.<\/p>\n\n\n\n

HTML<\/h4>\n\n\n\n
<<\/code>div<\/code> class<\/code>=<\/code>\"item\"<\/code>><\/code><<\/code>img<\/code> src<\/code>=<\/code>\"testimonial1.jpg\"<\/code> alt<\/code>=<\/code>\"Elise\"<\/code>><\/code><<\/code>div<\/code> class<\/code>=<\/code>\"card\"<\/code>><\/code><<\/code>p<\/code>><\/code>Eu rebum molestie per. No nostrud imperdiet abhorreant qui, hinc incorrupte vix ad. Vel id aliquip oblique. Primis feugait sit an, brute illud convenire duo ea. Graece tempor eripuit sed in.<\/code><\/<\/code>p<\/code>><\/code><<\/code>span<\/code>>Elise<\/<\/code>span<\/code>><\/code><\/<\/code>div<\/code>><\/code><\/<\/code>div<\/code>><\/code><<\/code>div<\/code> class<\/code>=<\/code>\"item\"<\/code>><\/code><<\/code>img<\/code> src<\/code>=<\/code>\"testimonial2.jpg\"<\/code> alt<\/code>=<\/code>\"John\"<\/code>><\/code><<\/code>div<\/code> class<\/code>=<\/code>\"card\"<\/code>><\/code><<\/code>p<\/code>><\/code>Vitae pericula maluisset ut mei, pro eleifend gubergren eu. Et his brute graeci. Affert ponderum ei vel, dolorum accumsan ea has. Sea oblique salutatus ei, simul lucilius pri et. Errem melius temporibus ut eos<\/code><\/<\/code>p<\/code>><\/code><<\/code>span<\/code>>John<\/<\/code>span<\/code>><\/code><\/<\/code>div<\/code>><\/code><\/<\/code>div<\/code>><\/code><<\/code>div<\/code> class<\/code>=<\/code>\"item\"<\/code>><\/code><<\/code>img<\/code> src<\/code>=<\/code>\"testimonial3.jpg\"<\/code> alt<\/code>=<\/code>\"Imani\"<\/code>><\/code><<\/code>div<\/code> class<\/code>=<\/code>\"card\"<\/code>><\/code><<\/code>p<\/code>><\/code>Ne est virtute indoctum, quaeque vituperata cum ut. Te nisl quaeque pri. Vix ex autem latine, mel ne nobis scaevola, ei est dolor utinam commune. Pri unum doctus in, cu primis pertinax eos.<\/code><\/<\/code>p<\/code>><\/code><<\/code>span<\/code>>Imani<\/<\/code>span<\/code>><\/code><\/<\/code>div<\/code>><\/code><\/<\/code>div<\/code>><\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

CSS<\/h4>\n\n\n\n

Time to style it up.<\/p>\n\n\n\n

.testimonials {<\/code>\/* Existing styles here *\/<\/code>padding<\/code>: <\/code>15px<\/code>;<\/code>text-align<\/code>: <\/code>center<\/code>;<\/code>}<\/code>.item {<\/code>\/* Existing styles here *\/<\/code>background-color<\/code>: <\/code>white<\/code>; <\/code>\/* Change the value to white *\/<\/code>margin-bottom<\/code>: <\/code>10px<\/code>;<\/code>padding<\/code>: <\/code>0<\/code> 50px<\/code>;<\/code>}<\/code>.item img {<\/code>margin<\/code>: <\/code>15px<\/code> auto<\/code> -60px<\/code>;<\/code>width<\/code>: <\/code>120px<\/code>;<\/code>height<\/code>: <\/code>120px<\/code>;<\/code>border<\/code>: <\/code>solid<\/code> 4px<\/code> #ffffff<\/code>;<\/code>border-radius<\/code>: <\/code>60px<\/code>;<\/code>box-shadow<\/code>: <\/code>0<\/code> 4px<\/code> 6px<\/code> -1px<\/code> rgba<\/code>(<\/code>0<\/code>, <\/code>0<\/code>, <\/code>0<\/code>, <\/code>0.1<\/code>);<\/code>z-index<\/code>: <\/code>2<\/code>;<\/code>}<\/code>.card {<\/code>background-color<\/code>: <\/code>rgb<\/code>(<\/code>237<\/code>, <\/code>242<\/code>, <\/code>247<\/code>);<\/code>padding<\/code>: <\/code>80px<\/code> 40px<\/code> 40px<\/code>;<\/code>border-radius<\/code>: <\/code>10px<\/code>;<\/code>box-shadow<\/code>: <\/code>0<\/code> 4px<\/code> 6px<\/code> -1px<\/code> rgba<\/code>(<\/code>0<\/code>, <\/code>0<\/code>, <\/code>0<\/code>, <\/code>0.1<\/code>);<\/code>z-index<\/code>: <\/code>1<\/code>;<\/code>}<\/code>.card p {<\/code>font-style<\/code>: <\/code>italic<\/code>;<\/code>line-height<\/code>: <\/code>1.6<\/code>;<\/code>}<\/code>.card span {<\/code>display<\/code>: <\/code>block<\/code>;<\/code>margin-top<\/code>: <\/code>20px<\/code>;<\/code>color<\/code>: <\/code>teal<\/code>;<\/code>font-weight<\/code>: <\/code>bold<\/code>;<\/code>letter-spacing<\/code>: <\/code>0.05em<\/code>;<\/code>text-transform<\/code>: <\/code>uppercase<\/code>;<\/code>}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Our carousel has taken shape. The only thing pending now is the navigation functionality.<\/p>\n\n\n\n

Adding navigation<\/h3>\n\n\n\n

In this demo, I have added simple arrows with <<\/code> and ><\/code> symbols for the navigation buttons. You can also use icons or images.<\/p>\n\n\n\n

HTML<\/h4>\n\n\n\n

Add these two lines immediately after the scroller<\/code> div, but within the testimonial<\/code> div:<\/p>\n\n\n\n

<<\/code>span<\/code> class<\/code>=<\/code>\"btn prev\"<\/code>>&lt;<\/<\/code>span<\/code>><\/code><<\/code>span<\/code> class<\/code>=<\/code>\"btn next\"<\/code>>&gt;<\/<\/code>span<\/code>><\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

CSS<\/h4>\n\n\n\n

Add these to your stylesheet for positioning and styling the navigation buttons:<\/p>\n\n\n\n

.testimonials {<\/code>\/* Existing styles here *\/<\/code>position<\/code>: <\/code>relative<\/code>;<\/code>}<\/code>.testimonials .btn {<\/code>position<\/code>: <\/code>absolute<\/code>;<\/code>top<\/code>: <\/code>50%<\/code>;<\/code>margin-top<\/code>: <\/code>20px<\/code>;<\/code>height<\/code>: <\/code>30px<\/code>;<\/code>width<\/code>: <\/code>30px<\/code>;<\/code>border-radius<\/code>: <\/code>15px<\/code>;<\/code>background-color<\/code>: <\/code>rgba<\/code>(<\/code>95<\/code>, <\/code>106<\/code>, <\/code>117<\/code>, <\/code>0.3<\/code>);<\/code>z-index<\/code>: <\/code>1<\/code>;<\/code>line-height<\/code>: <\/code>30px<\/code>;<\/code>text-align<\/code>: <\/code>center<\/code>;<\/code>color<\/code>: <\/code>white<\/code>;<\/code>font-weight<\/code>: <\/code>bold<\/code>;<\/code>}<\/code>.testimonials .btn:hover{<\/code>background-color<\/code>: <\/code>rgba<\/code>(<\/code>95<\/code>, <\/code>106<\/code>, <\/code>117<\/code>, <\/code>0.5<\/code>);<\/code>cursor<\/code>: <\/code>pointer<\/code>;<\/code>}<\/code>.testimonials .btn.next {<\/code>right<\/code>: <\/code>15px<\/code>;<\/code>}<\/code>.testimonials .btn.prev {<\/code>left<\/code>: <\/code>15px<\/code>;<\/code>}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

JavaScript<\/h4>\n\n\n\n

We need some JavaScript <\/strong>to make the buttons work. Add this script before closing the\u00a0body<\/code>\u00a0tag.<\/p>\n\n\n\n

<script><\/code>const testimonials = document.querySelector(<\/code>'.testimonials'<\/code>);<\/code>const scroller = testimonials.querySelector(<\/code>'.scroller'<\/code>);<\/code>const nextBtn = testimonials.querySelector(<\/code>'.btn.next'<\/code>);<\/code>const prevBtn = testimonials.querySelector(<\/code>'.btn.prev'<\/code>);<\/code>const itemWidth = testimonials.querySelector(<\/code>'.item'<\/code>).clientWidth;<\/code> nextBtn.addEventListener(<\/code>'click'<\/code>, scrollToNextItem);<\/code>prevBtn.addEventListener(<\/code>'click'<\/code>, scrollToPrevItem);<\/code> function<\/code> scrollToNextItem() {<\/code>scroller.scrollBy({left: itemWidth, top: 0, behavior: <\/code>'smooth'<\/code>});<\/code>}<\/code>function<\/code> scrollToPrevItem() {<\/code>scroller.scrollBy({left: -itemWidth, top: 0, behavior: <\/code>'smooth'<\/code>});<\/code>}<\/code><\/script><\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

In this code above, we have added \u2018click\u2019 event handlers to the prev<\/code> and next<\/code> buttons. The functionality of moving to the previous or next item is achieved using the scrollBy<\/code> method. Check out the syntax and examples of element.scrollBy<\/code> method<\/a>.<\/p>\n\n\n\n

The option behavior: \u2018smooth\u2019<\/code> gives a smooth sliding effect. Please note that this effect is not supported in IE 11 and a few older versions of other browsers<\/a>.<\/p>\n\n\n\n

Making it loop<\/h4>\n\n\n\n

You can optionally make this carousel loop – clicking on \u2018next\u2019 button for the last item makes the carousel start from beginning and similar behavior for \u2018prev\u2019 button, by changing the methods in your script to this:<\/p>\n\n\n\n

function<\/code> scrollToNextItem() {<\/code>if<\/code>(scroller.scrollLeft < (scroller.scrollWidth - itemWidth))<\/code>\/\/ The scroll position is not at the beginning of last item<\/code>scroller.scrollBy({left: itemWidth, top: 0, behavior:<\/code>'smooth'<\/code>});<\/code>else<\/code>\/\/ Last item reached. Go back to first item by setting scroll position to 0<\/code>scroller.scrollTo({left: 0, top: 0, behavior:<\/code>'smooth'<\/code>});<\/code>}<\/code>function<\/code> scrollToPrevItem() {<\/code>if<\/code>(scroller.scrollLeft != 0)<\/code>\/\/ The scroll position is not at the beginning of first item<\/code>scroller.scrollBy({left: -itemWidth, top: 0, behavior:<\/code>'smooth'<\/code>});<\/code>else<\/code>\/\/ This is the first item. Go to last item by setting scroll position to scroller width<\/code>scroller.scrollTo({left: scroller.scrollWidth, top: 0, behavior:<\/code>'smooth'<\/code>});<\/code>}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Making it fully responsive<\/h3>\n\n\n\n

What we have now is already responsive. Except that, for browser widths smaller than 480px<\/code>, the card becomes too narrow and long. So let\u2019s reduce some padding for the item and card for this width using media queries.<\/p>\n\n\n\n

Add this to your stylesheet:<\/p>\n\n\n\n

@media screen and (max-width: 480px) {
.item {
padding: 0 30px;
}
.card {
padding: 80px 30px 30px;
}
}<\/p>\n\n\n\n

This is it! You have successfully created a responsive carousel for your testimonials section with the least amount of JavaScript, and also learned about the new scroll-snap<\/code> properties in CSS. You can modify this carousel to suit your needs. Try and explore using this carousel for images with varying width and watch how it behaves.<\/p>\n\n\n\n

Download <\/strong>the complete source code<\/strong> for your use from below<\/strong>.<\/p>\n\n\n\n

Download<\/strong>: Link<\/a><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"

This tutorial will help you create a responsive carousel using the CSS scroll-snap property and very little JavaScript for navigation. You can use it for products display, or as a gallery, or for your testimonials \u2013 like the example in this tutorial. So here is what we will be creating: This is really just a […]<\/p>\n","protected":false},"author":2,"featured_media":5065,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[4,145,8,12,62],"tags":[25,56,94,146,116,87,110,217,16],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Creating-Carousel-Using-CSS-Snap-Scroll-And-Javascript.png","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-1jE","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/5062"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=5062"}],"version-history":[{"count":1,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/5062\/revisions"}],"predecessor-version":[{"id":5066,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/5062\/revisions\/5066"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/5065"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=5062"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=5062"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=5062"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}