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.

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

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

Max G

Leave a Reply

Your email address will not be published.

Related Posts

CSS Magic # 1. Beautiful hover effect

CSS Magic # 1. Beautiful hover effect

Html <div class="main__menu"> <div class="container"> <nav> <ul> <li><a href="#"><span data-text="HTML/CSS"></span>HTML</a></li> <li><a href="#"><span data-text="JavaScript"></span>JavaScript</a></li> <li><a href="#"><span data-text="CSS"></span>CSS</a></li> <li><a href="#"><span data-text="React"></span>React</a></li>... Read More
From the Author: Webpack is a JavaScript module bundler that transforms web resources such as HTML, CSS, JavaScript, and SVG files and bundles them into a smaller group of files. Webpack also helps with chunking (splitting into smaller chunks) and managing code dependencies to ensure that the code that needs to be loaded first does this. How webpack works In this article, we'll go over some of the new features to look out for in webpack in 2021, but first we'll look at what's new in webpack in 2020. webpack V4 - V5: Important Changes In October 2020, a newer version of webpack was released: webpack 5. This version removes all deprecated elements in V4 and fixes critical bugs to bring the webpack architecture up to par for future improvements. JavaScript. Quick Start Learn the basics of JavaScript with a hands-on example of building a web application Learn more Other interesting features in version 5: Long-Term Caching Support - New algorithms to support long-term caching are enabled by default in production mode. The real hash of the content - previously only the hash of the internal structure was used in webpack. Webpack 5 will use the real hash of the file content when used [contenthash], which will have a positive effect on long-term caching when only small changes are made to the file. Modular structure - webpack 5 came with a new feature that allows multiple webpack builds to work together. See here for the complete changelog. While 2020 has been a big year for webpack, there is still a lot more to come, which we'll talk about in the following sections. Please note that these updates are subject to change based on the ever-changing world of web developers. Webpack roadmap 2021 Improved ESM support Since the ECMAScript Module (ESM) was introduced in 2015, it has become the standard mechanism for code reuse in highly fragmented JavaScript applications. To improve ESM support, the webpack team is planning to make some important updates. Self-executing snippets One of the most interesting features of webpack is code splitting. This feature allows you to split your code into multiple packages that you can download on demand or in parallel. At the moment, dynamically loaded fragments in webpack usually serve as a container for modules and never execute module code directly. For example, writing: JavaScript import ("./ module") 1 import ("./ module") Will compile like this: JavaScript __webpack_load_chunk __ ("chunk-containing-module.js"). Then (() => __webpack_require __ (" ./module ")) 1 __webpack_load_chunk __ (" chunk-containing-module.js "). then (() => __webpack_require __ (" ./ module ")) In most cases this cannot be changed, but the webpack command considers some cases where webpack could generate a block that directly executes the contained module. This can result in less code generated. ESM imports and exports While there is already a plugin for generating ESM exports, the webpack team is considering adding built-in support for this feature, which may be useful when you decide to integrate webpack packages into ESM boot environments or inline scripts. JavaScript. Quick Start Learn the basics of JavaScript with a hands-on example of building a web application Learn More The command also takes absolute URLs into account when importing. This is very useful when using external services that offer their APIs as EcmaScript modules. Here's an example: JavaScript import {event} from "https://analytics.company.com/api/v1.js" // Changes to: import ("https://analytics.company.com/api/v1.js" ) 12345 import {event} from "https://analytics.company.com/api/v1.js" // Changes to: import ("https://analytics.company.com/api/v1.js") Such the function will help to gracefully handle errors with external dependencies. ESM Library The webpack team will also try to improve the bundling using the ESM libraries and will add a special mode that does not apply chunking, but instead generates rendered modules that can be plugged in via ESM imports and exports. This means that as long as loaders, graphics modules, and resource optimizers are running, no fragment graphs will be created. Instead, each module in the modules graph will be released as a separate file. Strict Mode Caveats Sooner or later, the webpack team plans to ensure that all contained code is put into strict mode when the ESM package is created. While this may not be a problem for many modules, there are a few older packages that may have problems with different interpretations, so it would be nice to see warnings for them. SourceMap Performance SourceMap provides a way to map code in a compressed file back to its original position in the original file. In other words, it links the minified version of the resource (CSS or JavaScript) to the original authoring version. This utility helps you debug applications even after resources have been compressed / optimized. Using SourceMap in webpack is currently quite expensive due to performance issues, so the webpack team will be looking to improve this in 2021. They will also be looking to update / improve the terser plugin, which is the default webpack minifier in webpack 5. Package.json export / import field Node.js v14 came with support for an export field in package.json. This feature allows you to directly define entry points for a package, or conditionally define entry points for each environment or JavaScript flavor (TypeScript, Elm, CoffeeScript, etc.). In a later release, private imports were also supported in Node.js (similar to the export field in package.json). For now, webpack 5 only supports the export function, even with additional conditions such as specifying production / development. Import fields for private imports are another feature to look out for in 2021. HMR for Modular Design Hot Module Replacement (HMR) works by replacing, adding, or removing modules while the application is still running, without the need for a complete reboot. This can significantly speed up development by preserving application state that would have been lost on a hard reboot. Plus, it instantly refreshes the page when changes are made to the source code, much like changing styles directly in the browser developer tools. Webpack 5 ships with a new feature called “Module Federation”. This feature allows you to integrate multiple assemblies together at runtime. HMR currently only supports one assembly at a time and updates cannot move between assemblies. The webpack team will work to improve the HMR updates to move between different builds, making it easier to develop federation apps. Hint System To monitor errors and warnings, the webpack team is considering adding another category for the user: hint. Similar to displaying errors and warnings, a tooltip notifies the user of information that may be of value to him. However, unlike the previous categories, the prompt will identify optimization opportunities or tricks, not problems. An example hint might look something like: "Did you know that when you add X a change to file Y, you can clean it up?"; or "Easy to encode the space with the space function." WebAssembly According to the official documentation, WebAssembly (abbreviated Wasm) is "a binary instruction format for a stack-based virtual machine." This means that you can build your software with programming languages ​​like Rust, C ++ and Python and provide it to the end user in a browser with near-native performance. In the current version of webpack, WebAssembly is experimental and not enabled by default. The default support is what the webpack team will hopefully add this year. Conclusion There are big changes coming to webpack in 2021, and while this list may not be final, we can look forward to new features and capabilities that will make webpack easier and more efficient. Author: Elijah Asaolu Source: blog.logrocket.com Editorial: The webformyself team. JavaScript. Quick Start Learn the basics of JavaScript with a hands-on example of building a web application Learn More Webpack. The Basics Watch the Webpack Video! Look

Lazy loading inline YouTube videos: working with HTML iframe

From the author: I was working on a simple static website where the YouTube video should be displayed right... Read More
Review of popular content management systems (CMS). Part 2

Review of popular content management systems (CMS). Part 2

In the last article, we looked at WordPress, Joomla, Bitrix and DLE systems. Now let’s move on to the... Read More