Calculator on Squarespace 7.0 & 7.1 website || jishaansinghal Video: https://youtu.be/zrN86OpUlK8 Contact Us: https://fiverr.com/s/8zBlpLr #calculator, #calculatoronsquarespace, #squarespace, #jishaansinghal,#css,#html,#js,#jquery,#squarespacewebsite,#customcode

Image
Calculator on Squarespace 7.0 & 7.1 website || jishaansinghal Video: https://youtu.be/zrN86OpUlK8 Contact Us: https://fiverr.com/s/8zBlpLr #calculator , #calculatoronsquarespace , #squarespace , #jishaansinghal , #css , #html , #js , #jquery , #squarespacewebsite , #customcode

In this video, I'm going to show you how to use Effect flip Slider on your own website by jishaansinghal

 In this video,I'm going to show you how to use Effect flip Slider on your own website by jishaansinghal






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

    <style>
      html,
      body {
        position: relative;
        height: 100%;
      }

      body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
        background-image: linear-gradient(to right, #051937, #252b67, #5b3692, #9f34b4, #eb12c7);
      }

      .swiper {
        width: 300px;
        height: 300px;
        padding: 50px;
        -webkit-box-shadow: 5px 5px 20px 5px #000000; 
box-shadow: 5px 5px 20px 5px #000000;
      }

      .swiper-slide {
        background-position: center;
        background-size: cover;
        width: 300px;
        height: 300px;
        -webkit-box-shadow: 5px 5px 20px 5px #000000; 
box-shadow: 5px 5px 20px 5px #000000;
      }

      .swiper-slide img {
        display: block;
        width: 100%;
        height: 100% !important;
      }
    </style>
  </head>

  <body>
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="https://swiperjs.com/demos/images/nature-1.jpg" />
        </div>
        <div class="swiper-slide">
          <img src="https://swiperjs.com/demos/images/nature-2.jpg" />
        </div>
        <div class="swiper-slide">
          <img src="https://swiperjs.com/demos/images/nature-3.jpg" />
        </div>
        <div class="swiper-slide">
          <img src="https://swiperjs.com/demos/images/nature-4.jpg" />
        </div>
        <div class="swiper-slide">
          <img src="https://swiperjs.com/demos/images/nature-5.jpg" />
        </div>
        <div class="swiper-slide">
          <img src="https://swiperjs.com/demos/images/nature-6.jpg" />
        </div>
      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-pagination"></div>
    </div>

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

    <script>
      var swiper = new Swiper(".mySwiper", {
        effect: "flip",
        grabCursor: true,
        pagination: {
          el: ".swiper-pagination",
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    </script>
  </body>
</html>






keywords:
website design and development,motivation,personal development,career,business,ecommerce,job,moshiur,codersfoundation,lifestyle,rich life,website design,bangla tutorial,coding,computer programming,online career,freelancing,wordpress,wordpress bangla tutorial,woocommerce,wordpress plugins,website development,wordpress development,make website,job opportunity,Funny,Bangladeshi,Youtuber,Comedy,Entertainment,Prank
FreelancingOnline Money EarningTutorialEducationLearn EnglishFunny Videosmake money onlinevlogFreelancer nasimbangla funny videobangladesh top freelancermotivational video best
outsourcingfreelancingfreelancing bangla tutorialoutsourcing institutejamal sirjamal sir video tutorialjamal sir freelancing video tutorialfreelance jobhow to get freelance jobfreelancing training center chittagongfreelanceing training center dhakafreelancing banglajamal sir channelseo bangla tutorialMohammad Jamal uddinfreelancer jamal uddinmohammad Jamal uddinmohammad jamal uddin






Comments

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