Рубрики
Без рубрики

Sowl-Carousel Cards Slider в HTML CSS & jQuery

Сова Carousel-это плагин JQuery с поддержкой, который позволяет создавать красивую отзывчивую карусель … Tagged with Owlcarousel, JavaScript, jQuery, Card.

Owl Carousel-это плагин JQuery с поддержкой, который позволяет создавать красивые реагирующие ползунки карусели. Карусель представляет собой коллекцию вращающихся баннеров или слайд -шоу, которое представляет собой домашнюю страницу вашего магазина. Он позволяет отображать до пяти слайдов, состоящих из изображений и текста, которые могут быть связаны с конкретными продуктами или страницами.

Сегодня в этом блоге я поделюсь этой программой (Sowl Carousel Cards Slider). В этой программе на веб-странице есть три карты профиля, и через каждые 2 секунды они автоматически скользят, и мы также можем скользить каждой картой в любом направлении (справа или влево).

Вы можете скопировать коды из данных поксов или загрузить файлы кода по данной ссылке, но я рекомендую загрузить файлы исходного кода вместо копирования кодов, потому что вы не получите изображения, если вы копируете коды. Нажмите здесь, чтобы загрузить кодовые файлы.

Вам может понравиться это:

Слайдер изображения с элементом управления слайдом Адаптивная Sowl-Carousel Slider Анимация клипа изображения с ползунками Потрясающий слайдер сравнения изображений

HTML -код:




  
    
    Owl-carousel Cards Slider | CodingNepal
    
    
    
    
  
  
    

      

        





          

Briana Tozour



Graphic Designer



Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit modi dolorem quis quae animi nihil minus sed unde voluptas cumque.



            
          







        





          

Pricilla Preez



Web Developer



Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit modi dolorem quis quae animi nihil minus sed unde voluptas cumque.



            
          







        





          

Eliana Maia



App Developer



Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit modi dolorem quis quae animi nihil minus sed unde voluptas cumque.
CSS -код:
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  text-align: center;
  background: #f2f2f2;
}
.slider{
  max-width: 1100px;
  display: flex;
}
.slider .card{
  flex: 1;
  margin: 0 10px;
  background: #fff;
}
.slider .card .img{
  height: 200px;
  width: 100%;
}
.slider .card .img img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.slider .card .content{
  padding: 10px 20px;
}
.card .content .title{
  font-size: 25px;
  font-weight: 600;
}
.card .content .sub-title{
  font-size: 20px;
  font-weight: 600;
  color: #e74c3c;
  line-height: 20px;
}
.card .content p{
  text-align: justify;
  margin: 10px 0;
}
.card .content .btn{
  display: block;
  text-align: left;
  margin: 10px 0;
}
.card .content .btn button{
  background: #e74c3c;
  color: #fff;
  border: none;
  outline: none;
  font-size: 17px;
  padding: 5px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.2s;
}
.card .content .btn button:hover{
  transform: scale(0.9);
}

Оригинал: “https://dev.to/codingnepal/owl-carousel-cards-slider-in-html-css-jquery-32lj”

Читайте ещё по теме: