Slider Plugin on your anytype of website by jishaansinghal

Slider Plugin on your anytype of website by jishaansinghal

In this video, I'm going to show you how to use Slider plugin on your own website

This is the code



     <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Slider demo</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
    />
    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>

    <!-- Demo styles -->
    <style>
      html,
      body {
        position: relative;
        height: 100%;
      }

      body {
        background-image: radial-gradient(circle, #38ff00, #00efa7, #00d6ff, #00b2ff, #0084ff, #6f6cf1, #a04bd8, #c200b4, #e70092, #fd006a, #ff003f, #ff0000);
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 34px;
        color: #fff;
        margin: 0;
        padding: 0;
      }

      .swiper {
        width: 800px;
      }
      .swiper-slide {
        height: 300px;
         background-image: radial-gradient(circle, #00fffe, #4be7b4, #7fcb6a, #a5a92a, #c18000, #cc7900, #d87000, #e46600, #de8e00, #c7b500, #98dc00, #00ff16);
         
        line-height: 300px;
        text-align: center;
      }
      .swiper-slide:nth-child(2) {
         background-image: radial-gradient(circle, #ffe800, #ffb30c, #ff7746, #ff3774, #f800a1, #e800a8, #d600ae, #c200b4, #e70092, #fd006a, #ff003f, #ff0000);
      }
      .swiper-slide:nth-child(3) {
        background-image: radial-gradient(circle, #17ff00, #9cdb00, #cbb400, #e38b00, #e96100, #ee5f00, #f25c00, #f75900, #ff8000, #ffa400, #ffc600, #ffe800);
      }
      .swiper-slide:nth-child(4) {
         background-image: radial-gradient(circle, #ffe800, #ffb10e, #ff7547, #ff3375, #f100a1, #f100a1, #f100a1, #f100a1, #ff3375, #ff7547, #ffb10e, #ffe800);
      }
      .swiper-slide:nth-child(5) {
       background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);
      }
      .swiper-slide:nth-child(6) {
        background-image: radial-gradient(circle, #051937, #004d7a, #008793, #00bf72, #a8eb12);
      }
      .swiper-slide:nth-child(7) {
        background-image: radial-gradient(circle, #c21b1b, #d25900, #d48c00, #c7bc00, #a8eb12);
      }
      .swiper-slide:nth-child(8) {
        background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
      }
      .swiper-slide:nth-child(9) {
         background-image: linear-gradient(to right bottom, #d16ba5, #fa6e87, #ff825e, #ffa530, #d9cc00, #b5df1f, #84f047, #00ff75, #00ffa1, #00ffc4, #13fedf, #5ffbf1);
      }
    </style>
  </head>

  <body>
    <!-- Swiper -->
<center>
    <h3 style="color: #000;">
     Slider Plugin on your anytype of website
    </h3>
    </center>
    <br />
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
      </div>
    </div>

    <!-- Swiper JS -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper(".mySwiper", {
        watchSlidesProgress: true,
        slidesPerView: 3,
      });
    </script>
  </body>
</html>

#AnalogDigitalGaugePlugin #pluginonwebsite #jishaansinghal Connect/Contact with me here Fiverr : https://www.fiverr.com/jishaansinghal Youtube : https://www.youtube.com/channel/UCIgD... Facebook : https://www.facebook.com/jishaan.singhal FB Group :https://www.facebook.com/groups/45716... FB Group :https://www.facebook.com/groups/freeg... FB Page :https://www.facebook.com/promoteyourgig Twitter : twitter.com/jishaan_singhal Instagram : https://www.instagram.com/jishaansinghal Linkedin : https://www.linkedin.com/in/jishaan-s... Blogger : https://jishaansinghal.blogspot.com Email : jishaanwm21@gmail.com keywords: analog digital analog digital converter analog digital watch analog digital clock analog digital trainer analog digital difference analog digital audio converter analog digital alarm clock analog digital audio pro analog digital associates analog digital antenna difference analog digital and hybrid computer analog digital and hybrid computer ppt analog digital and hybrid computer in hindi analog digital beamforming analog digital biskit analog digital box breitling analog digital bluetooth analog digital best analog digital watch analog and digital communication book pdf analog beamforming vs digital beamforming dvb-c digital analog wandler dvb-c analog digital analog digital dive watch analog digital disorder analog digital display analog digital devices analog digital discrete signal analog digital data analog digital design d sub analog or digital digital to analog (d/a) converters is dvi d analog or digital is sdi analog or digital which is better analog or digital analog digital examples analog digital electronics analog digital electronics projects analog digital electronics notes analog digital electronics pdf analog digital electronics lab manual analog digital electronics mcq analog digital electronics book analogico e digitale analog e digital diferença analog digital fastrack watches analog digital frequency analog digital filter difference analog digital filter analog digital film analog/digital fiber optic link analog digital fax fossil analog digital f analog digital conversion analog digital g shock analog digital generation analog digital ground analog digital ground plane separation analog digital ground circuit analog digital gif analog digital germany digital analog gauge analog digital hybrid computer analog digital hybrid computer in hindi analog digital hybrid modulation analog digital hybrid watch analog digital hybrid beamforming analog/digital/hybrid computer examples analog digital hybrid mixer analog digital hybrid synth analog digital interface analog digital inc analog digital input and output modules analog digital input difference analog digital ic analog digital isolator analog digital instruments limited analog & digital instrumentation joefox analog digital jam analog digital junghans analog digital jelaskan analog digital analog to digital converter jaycar analog and digital electronics jntuh question papers analog vs digital joystick digital vs analog journal j-axis cybeat analog digital analog digital kit analog digital karachi kodak analog digital analog digital kommunikation analog digital konverter analog digital kamera analog digital klocka analog & digital labs analog digital logo analog digital ladies watch analog digital line converter analog digital learning analog digital loop analog digital level analog digital least count analog digital mixer analog digital meaning analog digital men's watches analog digital multimeter analog digital military watch analog digital meaning in hindi analog digital meter analog digital modulation m-audio analog to digital converter digital&analog calyx m analog digital network analog digital notes nikon analog digital analog digital neurobiologie analog digital nedir analog digital nervensystem analog digital.no nervenzelle analog digital analog digital oscilloscope analog digital output analog digital optical converter analog digital omvandlare arduino analog digital output analog or digital digital or analog tv analog or digital difference analog digital processing analog digital penang analog digital pins arduino analog digital potentiometer analog digital phone converter analog digital phones pwm analog digital perbedaan analog digital analog digital quotes analog digital quantities analog digital quantisierung casio analog digital quartz analog and digital communication questions and answers pdf digital and analog quantities pdf analog vs digital audio quizlet analog and digital electronics question paper q&q analog digital watch analog digital radio analog digital raspberry pi analog digital recorder analog digital rf ch analog digital rf analog digital raspberry rado analog digital analog digital receiver r analog analog digital signals analog digital switch

Search This Blog

Jishaan Singhal

Expandable Animated Card Slider on Squarespace 7.0 & 7.1 website || jishaansinghal Video: https://youtu.be/AGh-Ffeo8Yw Contact Us: https://www.fiverr.com/s/1qgzx59 #cardslider, #squarespace, #jishaansinghal,#css,#html,#js,#jquery,#squarespacewebsite,#customcode

Slider Plugin on your anytype of website by jishaansinghal

Comments

Post a Comment

Popular posts from this blog

how to add a button as a circle button on the Squarespace by jishaansinghal

How to add Vector Scrolling GSAP animation Effects on your Squarespace Website in 2022 with full source code by jishaansinghal

How to install and use owl carousel mousewheel animation slider with full source code by jishaansinghal 2022