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.
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:
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.
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 () {…}); 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.
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
In the last article, we looked at WordPress, Joomla, Bitrix and DLE systems. Now let’s move on to the...
Read More
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
Cookie
Duration
Description
cookielawinfo-checbox-analytics
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checbox-functional
11 months
The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checbox-others
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-necessary
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-performance
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy
11 months
The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.