jQuery карусель з ефектом збільшувального скла

jQuery карусель з ефектом збільшувального скла

Колеги всім привіт.

jQuery плагін карусель продуктів для ваших веб-сайтів, які сумісні з мобільними пристроями. Плагін має функцію навігацію за ескізами, масштабування зображення (ефект збільшувального скла) та багато іншого.

 

Вимоги.

Підключити бібліотеку jQuery.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>

Підключити сам плагін jquery.exzoom.js та стилі jquery.exzoom.css.

<link rel="stylesheet" type="text/css" href="css/jquery.exzoom.css">
<script src="js/jquery.exzoom.js"></script>

 

HTML Код.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Carousel</title>
    <link rel="stylesheet" type="text/css" href="css/jquery.exzoom.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
    <script src="js/jquery.exzoom.js"></script>
</head>
<body>
<div class="container">
    <div class="exzoom hidden" id="exzoom">
        <div class="exzoom_img_box">
            <ul class='exzoom_img_ul'>
                <li><img src="image1.png"/></li>
                <li><img src="image2.png"/></li>
                <li><img src="image3.png"/></li>
                <li><img src="image4.png"/></li>
                <li><img src="image5.png"/></li>
                <li><img src="image6.png"/></li>
                <li><img src="image7.png"/></li>
                <li><img src="image8.png"/></li>
            </ul>
        </div>
        <div class="exzoom_nav"></div>
        <p class="exzoom_btn">
            <a href="javascript:void(0);" class="exzoom_prev_btn"> < </a>
            <a href="javascript:void(0);" class="exzoom_next_btn"> > </a>
        </p>
    </div>
</div>
</body>
</html>

 

CSS Код.

#exzoom {
    width: 400px;
    /*height: 400px;*/
}

 

JavaScript Код.

<script type="text/javascript">
    $(document).ready(function () {
        $('.container').imagesLoaded(function () {
            $("#exzoom").exzoom({
                autoPlay: false,
            });
            $("#exzoom").removeClass('hidden')
        });
    });
</script>

 

Дякую всім, я сподіваюся що вам моя стаття хоч чимось допомогла.

 

СХОЖІ СТАТТІ

JQuery плагін для збільшення зображення зі збільшувальним склом
JQuery плагін для збільшення зображення зі збільшувальним склом
WEB
JQuery - Галерея зображень зі збільшенням під час наведення
JQuery - Галерея зображень зі збільшенням під час наведення
WEB
Zoom blowup.js - Плагін збільшення зображення зі збільшувальним склом
Zoom blowup.js - Плагін збільшення зображення зі збільшувальним склом
WEB