I can't make the books slider

Question

There are books in my incoming data. I want to make these books slider by categories. In other words, when I click on the 1st class, the books belonging to the 1st class will be listed. When I click on 2nd grade I want 2nd grade books to be listed. But I want it to be in slider shape. The categories will increase more after that. like 3rd grade 4th grade. Please run the codes in full page

const books = [
  {
    id: 1,
    bookname: "Book Name 1",
    bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
    bookClass: "First Class"
  },
  {
    id: 2,
    bookname: "Book Name 2",
    bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
    bookClass: "First Class"
  },
  {
    id: 3,
    bookname: "Book Name 3",
    bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
    bookClass: "First Class"
  },
  {
    id: 4,
    bookname: "Book Name 4",
    bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
    bookClass: "First Class"
  },
  {
    id: 5,
    bookname: "Book Name 5",
   bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
    bookClass: "First Class"
  },
  {
    id: 6,
    bookname: "Book Name 6",
   bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
    bookClass: "First Class"
  },
  {
    id: 7,
    bookname: "Book Name 7",
    bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
    bookClass: "First Class"
  },
  {
    id: 8,
    bookname: "Book Name 8",
  bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
    bookClass: "First Class"
  },
  {
    id: 9,
    bookname: "Book Name 9",
   bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
    bookClass: "Second Class"
  },
  {
    id: 10,
    bookname: "Book Name 10",
    bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
    bookClass: "Second Class"
  },
  
]
const n = 6;
const bookshelfbox = document.querySelector('.bookshelfbox');
const bookproduct = document.querySelectorAll('.bookproduct');
const className = document.querySelector('.slides');
const bookproductbox = document.querySelector('.bookproductbox');

const grouredBooks = books.reduce((r, e, i) =>
    (i % n ? r[r.length - 1].push(e) : r.push([e])) && r
, []);

console.log(grouredBooks)

grouredBooks.map((books) => {
  const row = document.createElement('div');
  row.className = 'row';
  bookshelfbox.appendChild(row);
  return books.map(
    (book) =>
      (row.innerHTML += `
        <div class="bookproductbox">  
            <div class="bookproduct">
                <img 
                    src="${book.bookimage}" 
                    alt="" 
                    width="120" 
                    height="180"
                    class="img_thumb" style="width: 120px; height: 180px; top: -73px;"
                >
                <div class="producttitle">
                <p> ${book.bookname} </p>
                <p> ${book.bookClass} </p>
                </div>
        </div>
    `)
  );
});

@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;800&family=PT+Serif:wght@400;700&display=swap");

*,
html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
    font-family: 'PT Serif', serif;
}

body a {
    text-decoration: none;
}

body a:hover {
    text-decoration: none;
}

body .form-control:focus {
    outline: none;
    box-shadow: none !important;
}

body button:focus {
    outline: none;
    box-shadow: none;
}

body p {
    margin-bottom: 0 !important;
}



.wrapper .booklib {
    width: 100%;
    height: 100%;
}

.wrapper .booklib .header {
    background: #93643a url('images/header2.png') repeat;
    color: #e4b173;
    width: 100%;
    height: 70px;
    text-align: center;
    margin: 0 auto;
    overflow: hidden;
}

.wrapper .booklib .header ul {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.wrapper .booklib .header ul li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
    float: left;
    margin-right: 15px;
    padding: 4px 8px;
    border-radius: 5px;
    border: #d39e6b solid 1px;
    cursor: pointer;
    box-shadow: 1px 1px 4px rgb(0 0 0 / 40%);
    font-size: 18px;
    opacity: 0.7;
    transform: scale(0.9);
    transition: all .5s ease;
    font-weight: 900;
}

.wrapper .booklib .header ul .active {
    opacity: 1;
    transform: scale(1);
}

.bookshelfbox {
    position: relative;
    margin: 0;
    padding: 0;
    left: 0px;
    top: 0px;
    float: left;
    display: block;
    width: 100%;
    height: auto;
}

.bookshelfbox .bookproductbox {
    background: url('images/shelf2.png');
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    padding: 1rem;
    height: 225px;
}


.bookproduct {
    margin-left: 50px;
    position: relative !important;
    display: block;
    direction: ltr !important;
}

.bookproduct img {
    display: block !important;
    border: none !important;
    cursor: pointer;
    margin: 0 !important;
    padding: 0 !important;
}

.producttitle {
    position: absolute;
    top: 80%;
    z-index: 1;
    text-align: center !important;
    color: #ffffff;
    background: #c33b4e;
    overflow: hidden;
    max-height: auto;
    line-height: 14px !important;
    width: 100%;
    box-shadow: 0px 0px 8px rgb(0 0 0 / 40%);
    font-size: 11px;
    padding: 1px 5px 3px 5px;
    font-family: Arial, Helvetica, sans-serif;
}

.bookproduct:hover .producttitle {
    color: rgb(255, 255, 255); 
    background: url("http://srvalle.com/wp-content/plugins/bookshelf-slider/assets/title_product_bg.png") repeat rgb(195, 59, 78);
    overflow: visible; 
    max-height: 150px;
}



.flexslider {
    margin:0;
    border:0;
    background: none!important;
}

.flex-nav-prev, .flex-nav-next {
  display: none;
}



@media (max-width: 575.98px) {
    .wrapper .booklib .booklibnav .header {
        left: 60px;
        right: 60px;
    }

    .book-content {
        margin-left: 15px;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .wrapper .booklib .booklibnav .header {
        left: 60px;
        right: 60px;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    
}
.bookshelfbox {
  display: flex;
  flex-direction: column;
}

.bookproductbox, .row {
  display: flex;
}

<!doctype html>
<html lang="tr">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <link rel="shortcut icon" type="image/x-icon" href="/_tema/cms/images/favicon.png">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Custom CSS -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <title> TG Book Library </title>

</head>

<body>
  <div class="wrapper">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <div class="booklib">
            <div class="header">
              <ul class="slides">
                <li class="active">
                  First Class
                </li>
                <li>
                  Second Class
                </li>
              </ul>
            </div>
            <div class="bookshelfbox">
                            
            </div>            
          </div>
        </div>
      </div>
      <!--/ container end -->
    </div>
</body>

</html>





<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Answer 1

I used SwiperApi for this. Check and customize by yourself please.

 const books = [
        {
          id: 1,
          bookname: "Book Name 1",
          bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
          bookClass: "First Class",
        },
        {
          id: 2,
          bookname: "Book Name 2",
          bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
          bookClass: "First Class",
        },
        {
          id: 3,
          bookname: "Book Name 3",
          bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
          bookClass: "First Class",
        },
        {
          id: 4,
          bookname: "Book Name 4",
          bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
          bookClass: "First Class",
        },
        {
          id: 5,
          bookname: "Book Name 5",
          bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
          bookClass: "First Class",
        },
        {
          id: 6,
          bookname: "Book Name 6",
          bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
          bookClass: "First Class",
        },
        {
          id: 7,
          bookname: "Book Name 7",
          bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
          bookClass: "First Class",
        },
        {
          id: 8,
          bookname: "Book Name 8",
          bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
          bookClass: "First Class",
        },
        {
          id: 9,
          bookname: "Book Name 9",
          bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
          bookClass: "Second Class",
        },
        {
          id: 10,
          bookname: "Book Name 10",
          bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
          bookClass: "Second Class",
        },
      ];
      const n = 6; // slide per page
      const booksBase = $("#booksInto"); // books going to be added into swiper-swapper class.
      let defaultClass = $(".btnFilter").data("classname"); // initialize class.

      $(document).ready(function () {
        $(".btnFilter").click(filterBooks);
        filterBooks();
      });

      filterBooks = function (classname = null) {
        // getting value from data attribute if any button clicked
        if (classname != null) defaultClass = $(this).data("classname");
        let theDiv = "";
        $.each(
          books.filter((t) => t.bookClass == defaultClass),
          function (index, obj) {
            theDiv += `
                <div class="swiper-slide">
                <div class="bookItem">
                      <img class="card-img-top" src="${obj.bookimage}" alt="${obj.bookname}" />
                      <div class="card-body">
                        <p class="card-text">${obj.bookname}</h5>
                        <p class="card-text">${obj.bookClass}</h5>
                        <a href="#" class="btn btn-primary">Read Book</a>
                      </div>
                    </div>
                </div>
                `;
          }
        );
        booksBase.html(theDiv);
        makeSlider();
      };

      makeSlider = function () {
        const swiper = new Swiper(".swiper", {
          slidesPerView: n,
          spaceBetween: 30,
          pagination: {
            el: ".swiper-pagination",
            clickable: true,
          },
        });
      };

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    />
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <link
      rel="stylesheet"
      href="https://unpkg.com/swiper@7/swiper-bundle.min.css"
    />
    <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="row mb-5">
        <div class="col-lg-12">
          <div class="btn-group" role="group" aria-label="Basic example">
            <button
              type="button"
              class="btn btn-secondary btnFilter defaultClass"
              data-classname="First Class"
            >
              Class 1
            </button>

            <button
              type="button"
              class="btn btn-secondary btnFilter"
              data-classname="Second Class"
            >
              Class 2
            </button>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12">
          <!-- Slider main container -->
          <div class="swiper">
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper" id="booksInto"></div>
            <!-- If we need pagination -->
            <div class="swiper-pagination"></div>

            <!-- If we need navigation buttons -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

            <!-- If we need scrollbar -->
            <div class="swiper-scrollbar"></div>
          </div>
        </div>
      </div>
    </div>

  </body>
</html>