Возникли проблемы с ползунком Slick и Bootstrap (размер изображения изменяется после использования функции Slick js) - PullRequest
Новая
       30

Возникли проблемы с ползунком Slick и Bootstrap (размер изображения изменяется после использования функции Slick js)

1 голос
/ 24 апреля 2020

Я пытаюсь создать контейнер категории продукта с гладкой каруселью справа и слева. Однако, используя функцию js, мои изображения уменьшаются в размере введите описание изображения здесь введите описание изображения здесь . Я использую Bootstrap для классов (контейнер-жидкость, строка, col-md-3 и т. Д. c), все выглядит хорошо по форме, но как только я добавляю скользкую функцию ( второй ползунок ), моя категория продукта изображения становятся меньше. Я пытался понять, в чем проблема, но не смог ... любая помощь будет оценена 

/*banner slider*/ 
$('.slider-one')
.not(".slick-intialized")

.slick({
    autoplay: false,
    autoplaySpeed: 3000,
    dots: true,
    prevArrow: ".site-slider .slider-btn .prev",
    nextArrow: ".site-slider .slider-btn .next",
});



/*second slider*/
$('.slider-two')
.not(".slick-intialized")

.slick({
    prevArrow: ".site-slider-two .prev",
    nextArrow: ".site-slider-two .next",
    slidesToShow:5,
    slidesToScroll:1,
    autoplaySpeed:3000
});
/*root varialbe*/
:root{
    --light-gray: #2b3032a1;
    --primary-color: #45ccb8;
    --border: #2b303218;
    --text-color: #ff686b;
    --roboto: "Roboto", sans-serif;
    --gugi: "Gugi", cursive;
    --sofia: "Sofia", cursive;
}

/*Global css classes*/
.primary-color{
    color: var(--primary-color);
}
.bg-primary-color{
    background-color: var(--primary-color) !important;
}
.text-color{
    color: var(--text-color);
}
.font-roboto{
    font-family: var(--roboto);
}
.lightblue{
    color: lightblue;
}

/*header*/
header{
    background-color: var(--primary-color);
    font-family: var(--roboto);

}
header .site-title{
    font-family: var(--gugi);
}

.container .dropdown-toggle,
.container .dropdown-item{
    font-size: 0.7em;
}

.header-links a{
    font-size: 0.9em;
    text-decoration: none;
    color: white;
}


/*Slider one */
.site-slider{
    position: relative;
}

.position-top{
    position: absolute;
    top: 50%;
}

.site-slider .slider-btn .prev,
.site-slider .slider-btn .next{
    background-color: var(--primary-color);
    padding: 1rem 1.5rem;
    border-radius: 10rem;
    color: white;
    margin: 0 1rem;
    opacity: 0;
    transition: opacity 1s ease;
}

.site-slider:hover .slider-btn .prev,
.site-slider:hover .slider-btn .next{
    opacity: 1;
}

.right-0{
    right: 0;
}


/*slide dotd*/
.slick-dots li{
    color: white;
}
.slick-dots li.slick-active{
    transition: scale(2.5);
    box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, 0.205);
    background-color: white;
    border-radius: 100%;
    

}


/*slider two*/
.site-slider-two{
    position: relative;
    height: 30%;
}
.site-slider-two .product{
    height: 25rem;
    position: relative;
    overflow: hidden;
}
.site-slider-two .product img{
    width: 90%;
    margin: auto;
}
.site-btn.btn-span{
    padding: 0.8rem 1.9rem;
    border-radius: 4rem;
    border: 1px solid var(--primary-color);
    background-color: white;
    color: var(--light-gray);

}
.slider-two .slick-track .product:hover span{
    background-color: var(--primary-color);
}




/*slider wrapper test*/
.post-slider{
    border: 1px black solid;
    position: relative;
}
.post-slider .post-wrapper{
    width: 84%;
    height: 350px;
    margin: 0 auto;
    border: 1px red dotted;
}

.post-slider .post-wrapper .post{
    width: 300px;
    height: 350px;
    display: inline-block;
    
}

.post-slider .slider-title{
    text-align: center;
    margin: 30px auto;
}

.post-slider .post img{
    text-align: center;
    margin: 0 10px;
    width: 480px;
    height: 340px;
}

.post-slider .prev{
    position: absolute;
    top: 50%;
}

.post-slider .next{
    position: absolute;
    top: 50%;
}

.right-0{
    right: 0;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Online Store</title>

    <!--Bootstrap CND-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <!--Font Awesome CND-->
    <script src="https://kit.fontawesome.com/36eac67c14.js" crossorigin="anonymous"></script>
    <!--slick Slider-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
    <!--animate css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
    <!--Google fonts-->
    <link
        href="https://fonts.googleapis.com/css2?family=Anton&family=Gugi&family=Lato&family=Roboto&family=Sofia&display=swap"
        rel="stylesheet">
    <!--Custom Stylesheet-->
    <link rel="stylesheet" href="css/style.css">
</head>

<body>


    <!--header-->
    <header>
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-sm-12 col-12">
                    <div class="btn-group">
                        <button class="btn border border-dark dropdown-toggle my-md-4 my-2 " data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                            USD
                        </button>

                        <div class="dropdown-menu">
                            <a href="#" class="dropdown-item">ERU-Euro</a>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 col-12 text-center">
                    <h2 class="my-md-3 site-title text-white">Online Shopping</h2>
                </div>

                <div class="col-md-4 col-12 text-right">
                    <p class="my-md-4 header-links">
                        <a href="#" class="px-2">Sign In</a>
                        <a href="#" class="px-2">Create an Account</a>
                    </p>
                </div>
            </div>
        </div>



    </header>
    <!--/header-->
    <main>
        <!--banner slider-->
        <div class="container-fluid p-0">
            <div class="site-slider">

                <div class="slider-one">
                    <div>
                        <img src="./assets/item-1.jpg" class="img-fluid" alt="Banner-1" />
                    </div>
                    <div>
                        <img src="./assets/item-2.jpg" class="img-fluid" alt="Banner-2" />
                    </div>
                    <div>
                        <img src="./assets/item-3.jpg" class="img-fluid" alt="Banner-3" />
                    </div>
                </div>

                <div class="slider-btn">
                    <span class="prev position-top"><i class="fas fa-chevron-left"></i></span>
                    <span class="next position-top right-0"><i class="fas fa-chevron-right"></i></span>
                </div>

            </div>


        </div>

        <!--banner slider-->



        <!--Second slider-->
           <div class="container-fluid">

                <div class="site-slider-two px-md-4">

                      <div class="row slider-two text-center">
                            <div class="col-md-2 product pt-md-5 pt4">
                                <img src="./assets/id-9-cat-1.jpg" class="img-fluid" alt="product 1">
                                <span class="border site-btn btn-span">SOFA & CHAIRS</span>
                            </div>
                            <div class="col-md-2 product pt-md-5 pt4">
                                <img src="./assets/id-9-cat-2.jpg" class="img-fluid" alt="product 2">
                                <span class="border site-btn btn-span">SOFA & CHAIRS</span>
                            </div>
                            <div class="col-md-2 product pt-md-5 pt4">
                                <img src="./assets/id-9-cat-3.jpg" class="img-fluid" alt="product 3">
                                <span class="border site-btn btn-span">SOFA & CHAIRS</span>
                            </div>
                            <div class="col-md-2 product pt-md-5 pt4">
                                <img src="./assets/id-9-cat-4.jpg" class="img-fluid" alt="product 4">
                                <span class="border site-btn btn-span">SOFA & CHAIRS</span>
                            </div>
                            <div class="col-md-2 product pt-md-5 pt4">
                                <img src="./assets/id-9-cat-5.jpg" class="img-fluid" alt="product 5">
                                <span class="border site-btn btn-span">SOFA & CHAIRS</span>
                            </div>
                            <div class="col-md-2 product pt-md-5 pt4">
                                <img src="./assets/id-9-cat-3.jpg" class="img-fluid" alt="product 5">
                                <span class="border site-btn btn-span">SOFA & CHAIRS</span>
                            </div>

                      </div>

                      <div class="slider-btn">
                        <span class="prev position-top"><i class="fas fa-chevron-left fa-2x text-secondary"></i></span>
                        <span class="next position-top right-0"><i class="fas fa-chevron-right fa-2x text-secondary"></i></span>
                     </div>


                </div>

           </div>
                
        <!--Second slider-->

    </main>
    <footer></footer>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
    <!--slick slider-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
    <!--custom js-->
    <script src="./js/main.js"></script>
</body>

</html>

1 Ответ

0 голосов
/ 24 апреля 2020

у вас есть col-md-2 (bootstrap CSS) класс для ваших .slider-two > .product предметов. что дает столбцам низкую ширину и конфликтует с поведением скользящего ползунка.

при удалении он будет работать лучше.

, что испортилось. по возможности убери там.

...