Making a slider for the site. Video lesson. Owl carousel connection and configuration

Делаем слайдер для сайта. Подключение и настройка owl carousel

Hello everyone. In this tutorial, we will learn how to connect and configure a slider for a website or page. As a result, we will get such a carousel. Slides in the form of photos, arrows to scroll through it – back and forth. And pagination – circles under the slide, which will show in which order the slide is currently on.

Owl carousel – jQuery carousel – download, documentation

GitHub repository: github.com/OwlFonk/OwlCarousel

Documentation: htmlpreview.github.io/?https://github.com/OwlFonk/OwlCarousel…

Plugin site: owlgraphic.com/owlcarousel/ (not working at the time of this writing)

Lesson files: https://yadi.sk/d/O9g9i8qo3Bhrft

Lesson video

https://www.youtube.com/watch?v=el0Dz3XSPMk

Step 1. Download and connect the carousel

Since the domain of the site with the documentation for this carousel is not working now (at the time of this writing), we will work with the github repository where you can download the code and see the documentation for this plugin.

Go to the carousel repository and click on the green button “Clone or download”, then press Download ZIP… Now you have the files to connect to the project.

Unzip the files, find a folder inside with the name “Owl-carousel” and put it in our project inside the folder “Libs”… Your location may be different, but this is what I will use in the lesson.

We connect the carousel. In the header of the page, inside the head tag, include CSS styles:

<head>
...
<!-- Owl Carousel -->
<link rel="stylesheet" href="https://rightblog.ru/libs/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="libs/owl-carousel/owl.transitions.css">
<link rel="stylesheet" href="libs/owl-carousel/owl.theme.css">
</head>

At the end of the page, before the closing tag, include the jQuery library (I used the link to jQuery which is located on the Internet on the Googleapis site)

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Owl Carousel -->
<script src="libs/owl-carousel/owl.carousel.min.js"></script>

<!-- custom scripts -->
<script src="js/main.js"></script>

In this step, we have connected the carousel plugin files to our page.

Step 2. Prepare html markup

Let’s create html markup for slides for our carousel.

<div id="slider_container" class="owl-carousel">
    <img src="https://rightblog.ru/img/01.jpg" alt="Image Nature">
    <img src="img/02.jpg" alt="Image Nature">
    <img src="img/03.jpg" alt="Image Nature">
    <img src="img/04.jpg" alt="Image Nature">
    <img src="img/05.jpg" alt="Image Nature">
    <img src="img/06.jpg" alt="Image Nature">
</div>

The basic rules are as follows:

      1. It is necessary to create a common container, which will contain the slides of our carousel. We have this container <div id="slider_container" class="owl-carousel"> ... </div>… We give him a class class="owl-carousel" to apply the styles you want from the carousel library. And we give him id="slider_container"… The id value can be anything. We will refer to it and call (launch) our carousel.

Inside the container, create blocks for the slides. they must have the same structure. Since we only have pictures, so we put 6 images here. Naturally, the number of slides can be any. If you need to put in a slide not only an image, but also text and other elements, then each slide will need to be wrapped in an empty div.

    In this case, it will look like this:
<div id="slider_container" class="owl-carousel">
    <div>
        <h3>Some text</h3>
        <img src="https://rightblog.ru/img/01.jpg" alt="Image Nature">
    </div>
    <div>
        <h3>Some text</h3>
        <img src="img/02.jpg" alt="Image Nature">
    </div>
    <div>
        <h3>Some text</h3>
        <img src="img/03.jpg" alt="Image Nature">
    </div>
    ...
</div>

But we will do it only for pictures, so we will not use this listing (an example of markup).

Step 3. Calling (initializing) the plugin

Now we need to start our carousel. In other words, we need to tell the plugin that the div with id = “slider_container” is the container for our carousel. To do this, write the following in the main.js file:

$(document).ready(function() {

    /* Call OwlCarousel plugin */
    $("#slider_container").owlCarousel();
    
});

$ (Document) .ready (function () {…}); here means that the code inside it will work when the jQuery library and the entire HTML page are loaded. After that, the carousel plugin will be called – that is, to which it is written inside.

The carousel itself is called with the following construction: $("#slider_container").owlCarousel(); Here comes the selection of the container element for the carousel, we have it #slider_container i.e div from id=#slider_container, and then the carousel is screwed to it.

At this step, the carousel connection can be completed, as it is now connected and working.

Step 4. Setting up the carousel

When connecting the plugin, we can set certain settings for the carousel, which are described in the documentation. This is done by passing an object with parameters when initializing the plugin. As follows:

In the listing below, I have selected some of the settings. A complete list of possible parameters and their meaning can be found on the documentation site.

$("#slider_container").owlCarousel({

    // Most important owl features
    items : 1,
    itemsCustom : false,
    itemsDesktop : [1199,4],
    itemsDesktopSmall : [980,3],
    itemsTablet: [768,2],
    itemsTabletSmall: false,
    itemsMobile : [479,1],
    
    singleItem : true,
    
    //Autoplay
    autoPlay : false,
    stopOnHover : false,
    
    // Navigation
    navigation : true,
    navigationText : ["<img src="img/arrow_left.png">","<img src="img/arrow_right.png">"],
    rewindNav : true,
    scrollPerPage : false,
  
    //Transitions
    transitionStyle : "backSlide"

});

Type parameters items determine how many slides will be displayed on different screen sizes. Parameter autoPlay determines whether the carousel will automatically flip through the slides. stopOnHover – whether autoplay will stop when the cursor hovers over the slide or not.

Parameter navigation – showing arrows for switching slides. transitionStyle – special effect of changing slides. For it to work, you need to include the file in the header owl.transitions.css…

Parameter names are case sensitive.

Step 5. Customize appearance

If you need to work on the appearance and change the CSS styles of the carousel, then you can do this in the file owl.theme.css… This is the theme file that is responsible for the appearance, and you can safely edit it. What can not be said about the file owl.carousel.css, do not touch it. The process of customizing the appearance is in detail in the video tutorial. In a nutshell – open the theme file and the inspector in the browser. Using the inspector, we define the element and classes that need to be corrected, and then we correct them in the file with the theme.

This concludes this lesson. If it was useful, share a link to it on social networks, or write comments.

Download the archive with the lesson: https://yadi.sk/d/O9g9i8qo3Bhrft

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

How to make a product card unique: 5 important tips and tricks

How to make a product card unique: 5 important tips and tricks

Every day there are more and more online stores. The same product can be found in hundreds of different... Read More
Split testing: what is it and who needs it?

Split testing: what is it and who needs it?

Split testing (or A / B testing) is a comparison of two or more page variants in order to... Read More
Instagram feed on the site using js

Instagram feed on the site using js

Background You may have come to this page from the plugin link instafeed.js… I actually did an article earlier... Read More

Privacy Policy - Terms and Conditions