Skip to content

Commit

Permalink
Swiper changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@Saifallak
Saifallak authored Sep 3, 2024
1 parent ed04159 commit 9d3c56f
Showing 1 changed file with 62 additions and 57 deletions.
119 changes: 62 additions & 57 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,9 @@
<link rel="stylesheet" href="./css/style.css" />
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css"
integrity="sha512-pmAAV1X4Nh5jA9m+jcvwJXFQvCBi3T17aZ1KWkqXr7g/O2YMvO8rfaa5ETWDuBvRq6fbDjlw4jHL44jNTScaKg=="
crossorigin="anonymous" referrerpolicy="no-referrer"/>
</head>

<body>
Expand Down Expand Up @@ -1011,64 +1014,64 @@ <h3>Iterate,</h3>
</div>
</div>

<swiper-container class="mySwiper" slides-per-view="5" centered-slides="false" loop="true" space-between="30">
<swiper-slide>
<div class="mySwiper" slides-per-view="5" centered-slides="false" loop="true" space-between="30">
<div class="swiper-wrapper">
<div class="swiper-slide">

<div class="swiper_card">
<img src="./images/world.webp" alt="Description of the image" class="card-img">
<img src="./images/headerimg1.webp" alt="Description of the image" class="card-img">
<h6 class="swiper_title">Meet your Glide Certified Community</h6>
<p class="card-description">Last month we announced Glide’s first level of </p>
</div>
</swiper-slide>
<swiper-slide>
<div class="swiper_card">
<img src="./images/world.webp" alt="Description of the image" class="card-img">
<h6 class="swiper_title">Meet your Glide Certified Community</h6>
<p class="card-description">Last month we announced Glide’s first level of </p>
</div>
</swiper-slide>
<swiper-slide>
<div class="swiper_card">
<img src="./images/world.webp" alt="Description of the image" class="card-img">
<h6 class="swiper_title">Meet your Glide Certified Community</h6>
<p class="card-description">Last month we announced Glide’s first level of </p>
</div>
</swiper-slide>
<swiper-slide>
<div class="swiper_card">
<img src="./images/world.webp" alt="Description of the image" class="card-img">
<h6 class="swiper_title">Meet your Glide Certified Community</h6>
<p class="card-description">Last month we announced Glide’s first level of </p>
</div>
</swiper-slide>
<swiper-slide>
<div class="swiper_card">
<img src="./images/world.webp" alt="Description of the image" class="card-img">
<h6 class="swiper_title">Meet your Glide Certified Community</h6>
<p class="card-description">Last month we announced Glide’s first level of </p>
</div>
</swiper-slide>
<swiper-slide>
<div class="swiper_card">
<img src="./images/world.webp" alt="Description of the image" class="card-img">
<h6 class="swiper_title">Meet your Glide Certified Community</h6>
<p class="card-description">Last month we announced Glide’s first level of </p>
</div>
</swiper-slide>
<swiper-slide>
<div class="swiper_card">
<img src="./images/world.webp" alt="Description of the image" class="card-img">
<h6 class="swiper_title">Meet your Glide Certified Community</h6>
<p class="card-description">Last month we announced Glide’s first level of </p>
</div>
</swiper-slide>
<swiper-slide>
<div class="swiper_card">
<img src="./images/world.webp" alt="Description of the image" class="card-img">
<h6 class="swiper_title">Meet your Glide Certified Community</h6>
<p class="card-description">Last month we announced Glide’s first level of </p>
</div>
</swiper-slide>
</swiper-container>
</div>

<div class="swiper-slide">

<div class="swiper_card">
<img src="./images/headerimg2.webp" alt="Description of the image" class="card-img">
<h6 class="swiper_title">Meet your Glide Certified Community</h6>
<p class="card-description">Last month we announced Glide’s first level of </p>
</div>
</div>

<div class="swiper-slide">

<div class="swiper_card">
<img src="./images/headerimg3.webp" alt="Description of the image" class="card-img">
<h6 class="swiper_title">Meet your Glide Certified Community</h6>
<p class="card-description">Last month we announced Glide’s first level of </p>
</div>
</div>

<div class="swiper-slide">

<div class="swiper_card">
<img src="./images/headerimg4.webp" alt="Description of the image" class="card-img">
<h6 class="swiper_title">Meet your Glide Certified Community</h6>
<p class="card-description">Last month we announced Glide’s first level of </p>
</div>
</div>

<div class="swiper-slide">

<div class="swiper_card">
<img src="./images/headerimg5.webp" alt="Description of the image" class="card-img">
<h6 class="swiper_title">Meet your Glide Certified Community</h6>
<p class="card-description">Last month we announced Glide’s first level of </p>
</div>
</div>

<div class="swiper-slide">

<div class="swiper_card">
<img src="./images/headerimg6.webp" alt="Description of the image" class="card-img">
<h6 class="swiper_title">Meet your Glide Certified Community</h6>
<p class="card-description">Last month we announced Glide’s first level of </p>
</div>
</div>

</div>
</div>


<a href="./viewMore.html">
Expand Down Expand Up @@ -1285,8 +1288,10 @@ <h2>Payment Methods</h2>


</script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-element-bundle.min.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js"
integrity="sha512-Ysw1DcK1P+uYLqprEAzNQJP+J4hTx4t/3X2nbVwszao8wD+9afLjBQYjz7Uk4ADP+Er++mJoScI42ueGtQOzEA=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
var swiper = new Swiper('.mySwiper', {
slidesPerView: 5,
Expand All @@ -1300,4 +1305,4 @@ <h2>Payment Methods</h2>
});
</script>
</body>
</html>
</html>

0 comments on commit 9d3c56f

Please sign in to comment.