Membuat Testimonial Slider dengan jQuery & CSS

Membuat Testimonial Slider dengan jQuery & CSS

Membuat Testimonial Slider dengan jQuery & CSS
Membuat Testimonial Slider dengan jQuery & CSS

Cara Membuat  Form Testimonial  atau Testimoni Slider Responsive dengan jQuery & CSS pada Website, sudah tau dong kegunaannya ini untuk apa, ya kegunaan dari form testimoni ini untuk memperlihatkan review hasil project atau jualan kalian, adanya form testimonal menunjang ketertarikan orang lain pada jasa atau product yang kalian tawarkan, karena sudah ada banyak review dari customer yang lain, jadi lebih terpercaya deh intinya. Dengan kata lain, testimoni adalah semacam review. Beberapa ulasan ditampilkan oleh situs web yang bersifat testimonial.

Hari ini kalian akan belajar membuat slider testimonial otomatis dengan desain responsif . Sebagian besar situs web menggunakan testimonial di halaman beranda mereka untuk daya tarik pengguna yang lebih baik seperti yang admin katakan sebelumnya. Ketika kalian membeli layanan atau produk apa pun terlebih dahulu, kalian pasti memeriksa ulasan, itulah mengapa kalian harus menggunakannya di situs web kalian. Jika menggunakan CMS apa pun, begitu banyak plugin yang tersedia untuk membuat fitur ini. Tetapi jika kalian telah membuat situs web kalian dari nol & itu tidak didasarkan pada sistem manajemen konten apa pun maka posting ini akan membantu kalian.

Jadi, Hari ini admin akan membagikan cara membuat Slider Testimonial Responsif dengan jQuery dan CSS . Ini adalah slider otomatis atau putar otomatis untuk testimonial berdasarkan jQuery . admin menggunakan Library berbasis jquery khusus untuk membuat ulasan ini agar menjadi slider, Karena itu Library dibuat khusus untuk fungsi ini. Kalian dapat menampilkan satu atau beberapa testimonial kepada pengunjung, hanya dengan mengubah nilainya.

Nah jika kalian tertarik dengan programnya kalian bisa melihat preview nya dibawah ini tentu dengan source code yang admin sediakan.


Membuat Testimonial Slider Responsive dengan jQuery & CSS


mari kita bahas program yang akan dibuat ini. Seperti yang kalian ketahui admin menggunakan library khusus untuk membuat program ini, yaitu slick.js. Slick JS dikembangkan untuk membuat suatu slider atau carousel . Library ini didasarkan pada fungsi jQuery, oleh karena itu admin meletakkan postingan ini dalam kategori atau label JavaScript karena jQuery juga merupakan library dari JavaScript.

JavaScript atau jquery memiliki lebih sedikit baris kode, tetapi mereka adalah bagian utama dari fungsi penggeser ini. Sebagian besar dibuat dengan CSS, seperti tata letak , style UI button next / previous, dll. admin menggunakan library font awesome untuk membuat ikon.

di file JS, admin menambahkan autoplay : true ; kalian juga dapat menonaktifkan ini dengan menghapus atau memberi nilai false. Setelah itu, kalian dapat mengontrol berapa banyak testimonial yang ingin ditampilkan di halaman web kalian. Untuk ini, ada perintah slidesToShow : 2 Setelah itu, ada juga perintah untuk mengatur berapa banyak pengguna review yang ingin kalian slide pada satu slide. Itu adalah slidesToScroll : 1

Ada banyak hal, admin tidak bisa menjelaskannya secara tertulis. kalian akan mengerti dengan mudah setelah mendapatkan kodenya. Untuk membuat program ini kalian harus membuat 3 file. Pertama untuk HTML , kedua untuk CSS , & ketiga untuk JS . Ikuti langkah-langkah untuk membuat ini tanpa kesalahan apa pun.

Buat file HTML bernama index.html dan masukkan kode-kode yang diberikan di bawah ini.


<!DOCTYPE html>
<!--Code By RuangCoder ( https://www.ruangcoder.com )-->
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>jQuery Testimonial Slideshow | RuangCoder.com</title>

  <link href="https://fonts.googleapis.com/css?family=Lato|Patua+One&display=swap" rel="stylesheet">
  <link rel='stylesheet' href='https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css'>
      <link rel="stylesheet" href="style.css">

  
</head>

<body>

  <div class="container">
  <div class="testiSlide">
    <div>
      <figure class="testimonial">
        <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
          <div class="btn"></div>
        </blockquote>
        <img src="https://pbs.twimg.com/profile_images/829191018331385858/jxsj-ZmD.jpg" alt="Maksim Goffin" />
        <div class="peopl">
          <h3>Neil Patel</h3>
          <p class="indentity">SEO Expert</p>
        </div>
      </figure>
    </div>

    <div>
      <figure class="testimonial">
        <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
          <div class="btn"></div>
        </blockquote>
        <img src="https://secure.gravatar.com/avatar/24a495e3a7316e619af62445f1a86886?s=96&d=mm&r=g" alt="Maksim Goffin" />
        <div class="peopl">
          <h3>Shaan</h3>
          <p class="indentity">Web Developer</p>
        </div>
      </figure>
    </div>

    <div>
      <figure class="testimonial">
        <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
          <div class="btn"></div>
        </blockquote>
        <img src="https://yt3.ggpht.com/a/AGF-l7_ESQtd3r7nPdFdP_mmyxn65RFy9JlGT0dGyA=s900-mo-c-c0xffffffff-rj-k-no" alt="Maksim Goffin" />
        <div class="peopl">
          <h3>Brian Dean</h3>
          <p class="indentity">SEO / Blogger</p>
        </div>
      </figure>
    </div>

    <div>
      <figure class="testimonial">
        <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
          <div class="btn"></div>
        </blockquote>
        <img src="https://design.sva.edu/wp-content/uploads/2018/08/Sagmeister.jpg" alt="Maksim Goffin" />
        <div class="peopl">
          <h3>Stefan Sagmeister</h3>
          <p class="indentity">Graphic Designer</p>
        </div>
      </figure>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
  <script src='https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js'></script>

    <script  src="function.js"></script>

</body>
</html>

Sekarang buat file CSS bernama style.css dan masukkan kode ini.

/* Code By RuangCoder ( https://www.ruangcoder.com ) */
html {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    background: #fff;
    color: #333
}
body {
    margin:  0;
    background: #ff5057;
    height: 100vh;
}
h3 {
    font-family: 'Patua One', cursive;
    font-weight: 400;
    font-size: 1.4em;
    line-height: 1.4em;
    color: #fff
}
.container {
    box-sizing: content-box;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 40px;
    padding-bottom: 40px;
}
.indentity {
    margin: 0!important
}
figure.testimonial {
    position: relative;
    float: left;
    overflow: hidden;
    margin: 10px 1%;
    padding: 0 20px;
    text-align: left;
    box-shadow: none !important;
}
figure.testimonial * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.35s cubic-bezier(0.25, 0.5, 0.5, 0.9);
    transition: all 0.35s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
figure.testimonial img {
    max-width: 100%;
    vertical-align: middle;
    height: 90px;
    width: 90px;
    border-radius: 50%;
    margin: 40px 0 0 10px;
}
figure.testimonial blockquote {
    background-color: #fff;
    display: block;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
    margin: 0;
    padding: 25px 50px 30px;
    position: relative;
}
figure.testimonial blockquote:before, figure.testimonial blockquote:after {
    content: "\201C";
    position: absolute;
    color: #ff5057;
    font-size: 50px;
    font-style: normal;
}
figure.testimonial blockquote:before {
    top: 25px;
    left: 20px;
}
figure.testimonial blockquote:after {
    content: "\201D";
    right: 20px;
    bottom: 0;
}
figure.testimonial .btn {
    top: 100%;
    width: 0;
    height: 0;
    border-left: 0 solid transparent;
    border-right: 25px solid transparent;
    border-top: 25px solid #fff;
    margin: 0;
    position: absolute;
}
figure.testimonial .peopl {
    position: absolute;
    bottom: 45px;
    padding: 0 10px 0 120px;
    margin: 0;
    color: #ffffff;
    -webkit-transform: translateY(50%);
    transform: translateY(50%);
}
figure.testimonial .peopl h3 {
    opacity: 0.9;
    margin: 0;
}
.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    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;
    padding: 0;
}
.slick-list:focus {
    outline: none;
}
.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}
.slick-slider .slick-track, .slick-slider .slick-list {
    transform: translate3d(0, 0, 0);
}
.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.slick-track:before, .slick-track:after {
    display: table;
    content: '';
}
.slick-track:after {
    clear: both;
}
.slick-loading .slick-track {
    visibility: hidden;
}
.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
.slick-slide img {
    display: block;
}
.slick-slide.slick-loading img {
    display: none;
}
.slick-slide.dragging img {
    pointer-events: none;
}
.slick-initialized .slick-slide {
    display: block;
}
.slick-loading .slick-slide {
    visibility: hidden;
}
.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-btn.slick-hidden {
    display: none;
}

.slick-prev, .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 40%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before {
    opacity: 1;
}
.slick-prev:before, .slick-next:before {
    font-family: "FontAwesome";
    font-size: 40px;
    line-height: 1;
    opacity: .75;
    color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-prev {
    left: -40px;
}
.slick-prev:before {
    content: "";
}
.slick-next {
    right: -40px;
}
.slick-next:before {
    content: "";
}

Langkah terakhir, Buat file JavaScript bernama function.js dan masukkan kodenya.

/* Code By RuangCoder ( https://www.ruangcoder.com ) */
$(document).ready(function () {
    $('.testiSlide').slick({
        slidesToShow: 2,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 1500,
        responsive: [{
            breakpoint: 850,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1,
                infinite: true,
            }
        }]
    });
});

Penutup

Nah sampai disini kalian telah berhasil Membuat Testimonial Slider Responsive dengan jQuery & CSS, mungkin artikel nya sampai disini saja, semoga bermanfaat buat kalian, dan terimakasih sudah berkunjung, jangan bosan - bosan untuk berkunjung.

Anda mungkin menyukai postingan ini