Bootstrap Snippet Newly Acquired Books Carousel using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<br /><center>
<div class="box rounded">
<h3>Newly Acquired Materials</h3>
<div class="container">
  <h2>T.I.P. Manila Library Newly Acquired</h2>
   <section class="customer-logos slider">
      <div class="slide"><img src="https://emarketing.cengageasia.com/cover/cover/9780357749159.jpg"></div>
      <div class="slide"><img src="https://images.booksense.com/images/402/901/9781119901402.jpg"></div>
      <div class="slide"><img src="https://www.cengage.com/covers/imageServlet?image_type=LRGFC&catalog=cengage&productISBN13=9780357504406"></div>
      <div class="slide"><img src="https://m.media-amazon.com/images/I/7126L5K-WYL._AC_UF1000,1000_QL80_.jpg"></div>
      <div class="slide"><img src="https://image.bokus.com/images/9781284228991_200x_essentials-of-software-engineering"></div>
      <div class="slide"><img src="https://m.media-amazon.com/images/I/41F8+msM+YL._AC_UF894,1000_QL80_.jpg"></div>
      <div class="slide"><img src="https://m.media-amazon.com/images/I/91GIRI-FIpL._AC_UF1000,1000_QL80_.jpg"></div>
      <div class="slide"><img src="https://books.google.com/books/content?id=vJ2QzgEACAAJ&printsec=frontcover&img=1&zoom=5"></div>
      <div class="slide"><img src="https://image.freepik.com/free-vector/retro-label-on-rustic-background_82147503374.jpg"></div>
   </section>
<div class="container">
  <h2>T.I.P. QC Library Newly Acquired</h2>
   <section class="customer-logos slider">
      <div class="slide"><img src="https://image.freepik.com/free-vector/luxury-letter-e-logo-design_1017-8903.jpg"></div>
      <div class="slide"><img src="http://www.webcoderskull.com/img/logo.png"></div>
      <div class="slide"><img src="https://image.freepik.com/free-vector/3d-box-logo_1103-876.jpg"></div>
      <div class="slide"><img src="https://image.freepik.com/free-vector/blue-tech-logo_1103-822.jpg"></div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
h2{
  text-align:center;
  padding: 20px;
  font-size: 12
}
/* Slider */
.slick-slide {
    margin: 0px 20px;
}
.slick-slide img {
    width: 100%;
}
.slick-slider
{
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}
.slick-list
{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(document).ready(function(){
    $('.customer-logos').slick({
        slidesToShow: 6,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 1500,
        arrows: false,
        dots: false,
        pauseOnHover: false,
        responsive: [{
            breakpoint: 768,
            settings: {
                slidesToShow: 4
            }
        }, {
            breakpoint: 520,
            settings: {
                slidesToShow: 3
            }
        }]
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Newly Acquired Books Carousel "
Bootstrap 4.1.1 Snippet by csdeciph3r

Related: See More

Questions / Comments:

"Newly Acquired Books Carousel " Bootstrap 4.1.1 Snippet by csdeciph3r

Related: See More

Questions / Comments:

"Newly Acquired Books Carousel "
Bootstrap 4.1.1 Snippet by csdeciph3r