FROM CACHE - en_header
Promotion image

Video Swiper Slider issues

Video Swiper Slider issues

chris1532
New Member
4 0 0
‎04-27-2024 04:55 PM

Hey! I know the following must look horrible for somebody that actually knows what he / she does 😄 so... sorry for that. 

I created a video swiper slider that ended up exactly as I wanted it to be... Only issue... the code is using :root, html and body classes. And with them the whole page gets changed since the CSS isnt only taking effect within the custom liquid element but the whole page. 

No matter what I do... I cant get rid of the html class or restrict the CSS. 

Here is the code:

<!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">
    <title>Fody Slider</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <section id="tranding" style="background-color: #F7F7F7;">
        <div class="container">
            <div class="swiper tranding-slider">
                <div class="swiper-wrapper">
                    <!-- Slide 1 -->
                    <div class="swiper-slide tranding-slide">
                        <div class="tranding-slide-img">
                            <video src="https://cdn.shopify.com/videos/c/vp/a226a0fa5d384c6bafbc1014003143e0/a226a0fa5d384c6bafbc1014003143e0.HD-720p-1.6Mbps-25043029.mp4" muted loop></video>
                            <div class="mute-button" onclick="toggleMute(this)">
                                <ion-icon name="volume-off-outline"></ion-icon>
                            </div>
                        </div>
                    </div>
                    <!-- Slide 2 -->
                    <div class="swiper-slide tranding-slide">
                        <div class="tranding-slide-img">
                            <video src="https://cdn.shopify.com/videos/c/vp/d10f7e7482fe44f9b4fc45eededc023d/d10f7e7482fe44f9b4fc45eededc023d.HD-1080p-2.5Mbps-25044573.mp4" muted loop></video>
                            <div class="mute-button" onclick="toggleMute(this)">
                                <ion-icon name="volume-off-outline"></ion-icon>
                            </div>
                        </div>
                    </div>
                    <!-- Slide 3 -->
                    <div class="swiper-slide tranding-slide">
                        <div class="tranding-slide-img">
                            <video src="https://cdn.shopify.com/videos/c/vp/5b2b32024cec4a7fbf80d0190d10063d/5b2b32024cec4a7fbf80d0190d10063d.HD-1080p-2.5Mbps-25044559.mp4" muted loop></video>
                            <div class="mute-button" onclick="toggleMute(this)">
                                <ion-icon name="volume-off-outline"></ion-icon>
                            </div>
                        </div>
                    </div>
                    <!-- Slide 4 -->
                    <div class="swiper-slide tranding-slide">
                        <div class="tranding-slide-img">
                            <video src="https://cdn.shopify.com/videos/c/vp/fd061bf6710e42adb94ebacab4209ff3/fd061bf6710e42adb94ebacab4209ff3.HD-1080p-2.5Mbps-25044598.mp4" muted loop></video>
                            <div class="mute-button" onclick="toggleMute(this)">
                                <ion-icon name="volume-off-outline"></ion-icon>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="tranding-slider-control">
                    <div class="swiper-button-prev slider-arrow">
                        <ion-icon name="arrow-back-outline"></ion-icon>
                    </div>
                    <div class="swiper-button-next slider-arrow">
                        <ion-icon name="arrow-forward-outline"></ion-icon>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>
    </section>

    <script type="module"
        src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js">
    </script>
    <script nomodule
        src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js">
    </script>
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
    <script src="script.js"></script>
</body>

</html>

<script>
var TrandingSlider = new Swiper('.tranding-slider', {
    effect: 'coverflow',
    grabCursor: true,
    centeredSlides: true,
    loop: true,
    slidesPerView: 'auto',
    coverflowEffect: {
        rotate: 0,
        stretch: 0,
        depth: 100,
        modifier: 2.5,
    },
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    on: {
        init: function () {
            var video = this.slides[this.activeIndex].querySelector('video');
            if (video) {
                video.play();
            }
        }
    }
});

// Handle video playback
TrandingSlider.on('slideChange', function () {
    var slides = TrandingSlider.slides;
    for (var i = 0; i < slides.length; i++) {
        var video = slides[i].querySelector('video');
        if (video) {
            if (i === TrandingSlider.activeIndex) {
                video.play();
            } else {
                video.pause();
            }
        }
    }
});

// Toggle mute/unmute
function toggleMute(button) {
    var video = button.parentElement.querySelector('video');
    if (video) {
        video.muted = !video.muted;
        button.querySelector('ion-icon').setAttribute('name', video.muted ? 'volume-off-outline' : 'volume-high-outline');
    }
}

</script>

<style scoped>
    @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");
    *,
    *::before,
    *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        list-style-type: none;
        text-decoration: none;
    }

    :root {
        --primary: #ec994b;
        --white: #ffffff;
        --bg: #F7F7F7;
    }

    html  {
        font-size: 62.5%;
        font-family: "Montserrat", sans-serif;
        scroll-behavior: smooth;
    }

    @media (min-width: 1440px) {
        html {
            zoom: 1.5;
        }
    }

    @media (min-width: 2560px) {
        html {
            zoom: 1.7;
        }
    }

    @media (min-width: 3860px) {
        html {
            zoom: 2.5;
        }
    }

    ::-webkit-scrollbar {
        width: 1.3rem;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 1rem;
        background: #797979;
        transition: all 0.5s ease-in-out;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #222224;
    }

    ::-webkit-scrollbar-track {
        background: #f9f9f9;
    }

    body .swiper {
        font-size: 1.6rem;
        background: var(--bg);
    }

    .container {
        max-width: 124rem;
        padding: 0 0rem;
        margin: 0 0;
    }

    .text-center {
        text-align: center;
    }

    .section-heading {
        font-size: 3rem;
        color: var(--primary);
        padding: 2rem 0;
    }

    #tranding {
        padding: 4rem 0;
    }

    @media (max-width: 1440px) {
        #tranding {
            padding: 7rem 0;
        }
    }

    #tranding .tranding-slider {
        height: 53rem;
        padding: 2rem 0;
        position: relative;
    }

    @media (max-width: 500px) {
        #tranding .tranding-slider {
            height: 51rem;
        }
    }

    .tranding-slide {
        width: 37rem;
        height: 42rem;
        position: relative;
        padding: 0px!important;
    }

    @media (max-width: 500px) {
        .tranding-slide {
            width: 28rem !important;
            height: 36rem !important;
        }

        .tranding-slide .tranding-slide-img img {
            width: 28rem !important;
            height: 36rem !important;
        }
    }

    .tranding-slide .tranding-slide-img video {
        width: 37rem;
        height: 42rem;
        border-radius: 2rem; /* Border Radius für die Videos */
        object-fit: cover;
    }

    .tranding-slide .tranding-slide-content {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }

    .tranding-slide-content .food-price {
        position: absolute;
        top: 2rem;
        right: 2rem;
        color: var(--white);
    }

    .tranding-slide-content .tranding-slide-content-bottom {
        position: absolute;
        bottom: 2rem;
        left: 2rem;
        color: var(--white);
    }

    .food-rating {
        padding-top: 1rem;
        display: flex;
        gap: 12rem;
    }

    .rating ion-icon {
        color: var(--primary);
    }

    .swiper-slide-shadow-left,
    .swiper-slide-shadow-right {
        display: none;
    }

    .tranding-slider-control {
        position: relative;
        bottom: 1rem;
        margin-top: 0px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tranding-slider-control .swiper-button-next {
        left: 58% !important;
        transform: translateX(-58%) !important;
    }

    @media (max-width: 990px) {
        .tranding-slider-control .swiper-button-next {
            left: 70% !important;
            transform: translateX(-70%) !important;
        }
    }

    @media (max-width: 450px) {
        .tranding-slider-control .swiper-button-next {
            left: 80% !important;
            transform: translateX(-80%) !important;
        }
    }

    @media (max-width: 990px) {
        .tranding-slider-control .swiper-button-prev {
            left: 30% !important;
            transform: translateX(-30%) !important;
        }
    }

    @media (max-width: 450px) {
        .tranding-slider-control .swiper-button-prev {
            left: 20% !important;
            transform: translateX(-20%) !important;
        }
    }

    .tranding-slider-control .slider-arrow {
        background: #551D60;
        width: 3.5rem;
        height: 3.5rem;
        border-radius: 50%;
        left: 42%;
        transform: translateX(-42%);
        filter: drop-shadow(0px 8px 24px rgba(18, 28, 53, 0.1));
    }

    .tranding-slider-control .slider-arrow ion-icon {
        font-size: 2rem;
        color: white;
    }

    .tranding-slider-control .slider-arrow::after {
        content: '';
    }

    .tranding-slider-control .swiper-pagination {
        position: relative;
        width: 15rem;
        bottom: 1rem;
    }

    .tranding-slider-control .swiper-pagination .swiper-pagination-bullet {
        filter: drop-shadow(0px 8px 24px rgba(18, 28, 53, 0.1));
    }

    .tranding-slider-control .swiper-pagination .swiper-pagination-bullet-active {
        background: #551D60;
    }

    #tranding {
        margin: -20px 0px 50px 0px;
        padding: 0 0 30px 0; /* Hier habe ich das Padding auf 2 Rem oben und unten reduziert */
    }

    /* Neues CSS für das Lautsprechersymbol */
    .mute-button {
        position: absolute;
        top: 20px;
        left: 20px;
        z-index: 10;
        cursor: pointer;
    }

    .mute-button ion-icon {
        font-size: 2rem;
        color: white;
    }
</style>


I really tried stuff for a couple of hours but either the slider breaks or the rest of the page is altered by the css. 

May somebody in here got an idea! 

With kind regards
Chris

4,262 Views
0 Likes
Report
Replies 6 (6)

wo
Shopify Partner
188 42 42
‎04-27-2024 10:45 PM

Add a section.

wo_0-1714271771674.png

Modify your code

<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
<link rel="stylesheet" href="style.css">
<section id="tranding" style="background-color: #F7F7F7;">
  <div class="container">
    <div class="swiper tranding-slider">
      <div class="swiper-wrapper">
        <!-- Slide 1 -->
        <div class="swiper-slide tranding-slide">
          <div class="tranding-slide-img">
            <video
              src="https://cdn.shopify.com/videos/c/vp/a226a0fa5d384c6bafbc1014003143e0/a226a0fa5d384c6bafbc1014003143e0.HD-720p-1.6Mbps-25043029.mp4"
              muted loop></video>
            <div class="mute-button" onclick="toggleMute(this)">
              <ion-icon name="volume-off-outline"></ion-icon>
            </div>
          </div>
        </div>
        <!-- Slide 2 -->
        <div class="swiper-slide tranding-slide">
          <div class="tranding-slide-img">
            <video
              src="https://cdn.shopify.com/videos/c/vp/d10f7e7482fe44f9b4fc45eededc023d/d10f7e7482fe44f9b4fc45eededc023d.HD-1080p-2.5Mbps-25044573.mp4"
              muted loop></video>
            <div class="mute-button" onclick="toggleMute(this)">
              <ion-icon name="volume-off-outline"></ion-icon>
            </div>
          </div>
        </div>
        <!-- Slide 3 -->
        <div class="swiper-slide tranding-slide">
          <div class="tranding-slide-img">
            <video
              src="https://cdn.shopify.com/videos/c/vp/5b2b32024cec4a7fbf80d0190d10063d/5b2b32024cec4a7fbf80d0190d10063d.HD-1080p-2.5Mbps-25044559.mp4"
              muted loop></video>
            <div class="mute-button" onclick="toggleMute(this)">
              <ion-icon name="volume-off-outline"></ion-icon>
            </div>
          </div>
        </div>
        <!-- Slide 4 -->
        <div class="swiper-slide tranding-slide">
          <div class="tranding-slide-img">
            <video
              src="https://cdn.shopify.com/videos/c/vp/fd061bf6710e42adb94ebacab4209ff3/fd061bf6710e42adb94ebacab4209ff3.HD-1080p-2.5Mbps-25044598.mp4"
              muted loop></video>
            <div class="mute-button" onclick="toggleMute(this)">
              <ion-icon name="volume-off-outline"></ion-icon>
            </div>
          </div>
        </div>
      </div>

      <div class="tranding-slider-control">
        <div class="swiper-button-prev slider-arrow">
          <ion-icon name="arrow-back-outline"></ion-icon>
        </div>
        <div class="swiper-button-next slider-arrow">
          <ion-icon name="arrow-forward-outline"></ion-icon>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </div>
</section>

<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js">
</script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js">
</script>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<script src="script.js"></script>


<script>
  var TrandingSlider = new Swiper('.tranding-slider', {
    effect: 'coverflow',
    grabCursor: true,
    centeredSlides: true,
    loop: true,
    slidesPerView: 'auto',
    coverflowEffect: {
      rotate: 0,
      stretch: 0,
      depth: 100,
      modifier: 2.5,
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    on: {
      init: function () {
        var video = this.slides[this.activeIndex].querySelector('video');
        if (video) {
          video.play();
        }
      }
    }
  });

  // Handle video playback
  TrandingSlider.on('slideChange', function () {
    var slides = TrandingSlider.slides;
    for (var i = 0; i < slides.length; i++) {
      var video = slides[i].querySelector('video');
      if (video) {
        if (i === TrandingSlider.activeIndex) {
          video.play();
        } else {
          video.pause();
        }
      }
    }
  });

  // Toggle mute/unmute
  function toggleMute(button) {
    var video = button.parentElement.querySelector('video');
    if (video) {
      video.muted = !video.muted;
      button.querySelector('ion-icon').setAttribute('name', video.muted ? 'volume-off-outline' : 'volume-high-outline');
    }
  }

</script>

<style scoped>
  @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");

  *,
  *::before,
  *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style-type: none;
    text-decoration: none;
  }

  :root {
    --primary: #ec994b;
    --white: #ffffff;
    --bg: #F7F7F7;
  }

  html {
    font-size: 62.5%;
    font-family: "Montserrat", sans-serif;
    scroll-behavior: smooth;
  }

  @media (min-width: 1440px) {
    html {
      zoom: 1.5;
    }
  }

  @media (min-width: 2560px) {
    html {
      zoom: 1.7;
    }
  }

  @media (min-width: 3860px) {
    html {
      zoom: 2.5;
    }
  }

  ::-webkit-scrollbar {
    width: 1.3rem;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 1rem;
    background: #797979;
    transition: all 0.5s ease-in-out;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #222224;
  }

  ::-webkit-scrollbar-track {
    background: #f9f9f9;
  }

  body .swiper {
    font-size: 1.6rem;
    background: var(--bg);
  }

  .container {
    max-width: 124rem;
    padding: 0 0rem;
    margin: 0 0;
  }

  .text-center {
    text-align: center;
  }

  .section-heading {
    font-size: 3rem;
    color: var(--primary);
    padding: 2rem 0;
  }

  #tranding {
    padding: 4rem 0;
  }

  @media (max-width: 1440px) {
    #tranding {
      padding: 7rem 0;
    }
  }

  #tranding .tranding-slider {
    height: 53rem;
    padding: 2rem 0;
    position: relative;
  }

  @media (max-width: 500px) {
    #tranding .tranding-slider {
      height: 51rem;
    }
  }

  .tranding-slide {
    width: 37rem;
    height: 42rem;
    position: relative;
    padding: 0px !important;
  }

  @media (max-width: 500px) {
    .tranding-slide {
      width: 28rem !important;
      height: 36rem !important;
    }

    .tranding-slide .tranding-slide-img img {
      width: 28rem !important;
      height: 36rem !important;
    }
  }

  .tranding-slide .tranding-slide-img video {
    width: 37rem;
    height: 42rem;
    border-radius: 2rem;
    /* Border Radius für die Videos */
    object-fit: cover;
  }

  .tranding-slide .tranding-slide-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }

  .tranding-slide-content .food-price {
    position: absolute;
    top: 2rem;
    right: 2rem;
    color: var(--white);
  }

  .tranding-slide-content .tranding-slide-content-bottom {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    color: var(--white);
  }

  .food-rating {
    padding-top: 1rem;
    display: flex;
    gap: 12rem;
  }

  .rating ion-icon {
    color: var(--primary);
  }

  .swiper-slide-shadow-left,
  .swiper-slide-shadow-right {
    display: none;
  }

  .tranding-slider-control {
    position: relative;
    bottom: 1rem;
    margin-top: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .tranding-slider-control .swiper-button-next {
    left: 58% !important;
    transform: translateX(-58%) !important;
  }

  @media (max-width: 990px) {
    .tranding-slider-control .swiper-button-next {
      left: 70% !important;
      transform: translateX(-70%) !important;
    }
  }

  @media (max-width: 450px) {
    .tranding-slider-control .swiper-button-next {
      left: 80% !important;
      transform: translateX(-80%) !important;
    }
  }

  @media (max-width: 990px) {
    .tranding-slider-control .swiper-button-prev {
      left: 30% !important;
      transform: translateX(-30%) !important;
    }
  }

  @media (max-width: 450px) {
    .tranding-slider-control .swiper-button-prev {
      left: 20% !important;
      transform: translateX(-20%) !important;
    }
  }

  .tranding-slider-control .slider-arrow {
    background: #551D60;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    left: 42%;
    transform: translateX(-42%);
    filter: drop-shadow(0px 8px 24px rgba(18, 28, 53, 0.1));
  }

  .tranding-slider-control .slider-arrow ion-icon {
    font-size: 2rem;
    color: white;
  }

  .tranding-slider-control .slider-arrow::after {
    content: '';
  }

  .tranding-slider-control .swiper-pagination {
    position: relative;
    width: 15rem;
    bottom: 1rem;
  }

  .tranding-slider-control .swiper-pagination .swiper-pagination-bullet {
    filter: drop-shadow(0px 8px 24px rgba(18, 28, 53, 0.1));
  }

  .tranding-slider-control .swiper-pagination .swiper-pagination-bullet-active {
    background: #551D60;
  }

  #tranding {
    margin: -20px 0px 50px 0px;
    padding: 0 0 30px 0;
    /* Hier habe ich das Padding auf 2 Rem oben und unten reduziert */
  }

  /* Neues CSS für das Lautsprechersymbol */
  .mute-button {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
    cursor: pointer;
  }

  .mute-button ion-icon {
    font-size: 2rem;
    color: white;
  }
</style>

{% schema %}
{
  "name": "Video Slideshow",
  "presets": [
   {
    "name": "Video Slideshow"
    }
  ]

}
{% endschema %}

This way you can add the module you just added here.

wo_1-1714272317592.png

 

4,198 Views
0 Likes
Report
In response to wo

chris1532
New Member
4 0 0
‎04-28-2024 12:57 AM

Hey Wo! Thanks a lot! Sadly this way when I add the section the CSS still changes things throughout the page through the :root, HTML and body parts 💩

4,190 Views
0 Likes
Report

chris1532
New Member
4 0 0
‎04-28-2024 04:58 AM

Okay Update: I tried adding the swiper-bundle.min.css and edit the font-size in there but with no success.

I also cleaned the code and removed everything that wasn't needed. But the issue still remains. 

html  {
        font-size: 62.5%;
    }
Kills the page and as soon as I try anything to remove this or change the HTML to something else that usually would make sense... the slider breaks




 

<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />

    <section id="tranding" style="background-color: #F7F7F7;">
        <div class="swiper-container">
            <div class="swiper tranding-slider">
                <div class="swiper-wrapper">
                    <!-- Slide 1 -->
                    <div class="swiper-slide tranding-slide">
                        <div class="tranding-slide-img">
                            <video src="https://cdn.shopify.com/videos/c/vp/a226a0fa5d384c6bafbc1014003143e0/a226a0fa5d384c6bafbc1014003143e0.HD-720p-1.6Mbps-25043029.mp4" muted loop></video>
                            <div class="mute-button" onclick="toggleMute(this)">
                                <ion-icon name="volume-off-outline"></ion-icon>
                            </div>
                        </div>
                    </div>
                    <!-- Slide 2 -->
                    <div class="swiper-slide tranding-slide">
                        <div class="tranding-slide-img">
                            <video src="https://cdn.shopify.com/videos/c/vp/d10f7e7482fe44f9b4fc45eededc023d/d10f7e7482fe44f9b4fc45eededc023d.HD-1080p-2.5Mbps-25044573.mp4" muted loop></video>
                            <div class="mute-button" onclick="toggleMute(this)">
                                <ion-icon name="volume-off-outline"></ion-icon>
                            </div>
                        </div>
                    </div>
                    <!-- Slide 3 -->
                    <div class="swiper-slide tranding-slide">
                        <div class="tranding-slide-img">
                            <video src="https://cdn.shopify.com/videos/c/vp/5b2b32024cec4a7fbf80d0190d10063d/5b2b32024cec4a7fbf80d0190d10063d.HD-1080p-2.5Mbps-25044559.mp4" muted loop></video>
                            <div class="mute-button" onclick="toggleMute(this)">
                                <ion-icon name="volume-off-outline"></ion-icon>
                            </div>
                        </div>
                    </div>
                    <!-- Slide 4 -->
                    <div class="swiper-slide tranding-slide">
                        <div class="tranding-slide-img">
                            <video src="https://cdn.shopify.com/videos/c/vp/fd061bf6710e42adb94ebacab4209ff3/fd061bf6710e42adb94ebacab4209ff3.HD-1080p-2.5Mbps-25044598.mp4" muted loop></video>
                            <div class="mute-button" onclick="toggleMute(this)">
                                <ion-icon name="volume-off-outline"></ion-icon>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="tranding-slider-control">
                    <div class="swiper-button-prev slider-arrow">
                        <ion-icon name="arrow-back-outline"></ion-icon>
                    </div>
                    <div class="swiper-button-next slider-arrow">
                        <ion-icon name="arrow-forward-outline"></ion-icon>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>
    </section>







<script type="module"
        src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js">
    </script>
    <script nomodule
        src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js">
    </script>
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
    <script src="script.js"></script>

<script>
var TrandingSlider = new Swiper('.tranding-slider', {
    effect: 'coverflow',
    grabCursor: true,
    centeredSlides: true,
    loop: true,
    slidesPerView: 'auto',
    coverflowEffect: {
        rotate: 0,
        stretch: 0,
        depth: 100,
        modifier: 2.5,
    },
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    on: {
        init: function () {
            var video = this.slides[this.activeIndex].querySelector('video');
            if (video) {
                video.play();
            }
        }
    }
});

// Handle video playback
TrandingSlider.on('slideChange', function () {
    var slides = TrandingSlider.slides;
    for (var i = 0; i < slides.length; i++) {
        var video = slides[i].querySelector('video');
        if (video) {
            if (i === TrandingSlider.activeIndex) {
                video.play();
            } else {
                video.pause();
            }
        }
    }
});

// Toggle mute/unmute
function toggleMute(button) {
    var video = button.parentElement.querySelector('video');
    if (video) {
        video.muted = !video.muted;
        button.querySelector('ion-icon').setAttribute('name', video.muted ? 'volume-off-outline' : 'volume-high-outline');
    }
}

</script>








<style>
  html  {
        font-size: 62.5%;
    }
   
    ::-webkit-scrollbar {
        width: 1.3rem;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 1rem;
        background: #797979;
        transition: all 0.5s ease-in-out;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #222224;
    }

    ::-webkit-scrollbar-track {
        background: #f9f9f9;
    }

    .swiper-container {
        max-width: 124rem;
        padding: 0 0rem;
        margin: 0 0;
    }

    @media (max-width: 1440px) {
        #tranding {
            padding: 7rem 0;
        }
    }

    #tranding .tranding-slider {
        height: 53rem;
        padding: 2rem 0;
        position: relative;
    }

    @media (max-width: 500px) {
        #tranding .tranding-slider {
            height: 51rem;
        }
    }

    .tranding-slide {
        width: 37rem;
        height: 42rem;
        position: relative;
        padding: 0px!important;
    }

    @media (max-width: 500px) {
        .tranding-slide {
            width: 28rem !important;
            height: 36rem !important;
        }

        .tranding-slide .tranding-slide-img img {
            width: 28rem !important;
            height: 36rem !important;
        }
    }

    .tranding-slide .tranding-slide-img video {
        width: 37rem;
        height: 42rem;
        border-radius: 2rem; /* Border Radius für die Videos */
        object-fit: cover;
    }

    .tranding-slide .tranding-slide-content {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }

    .swiper-slide-shadow-left,
    .swiper-slide-shadow-right {
        display: none;
    }

    .tranding-slider-control {
        position: relative;
        bottom: 1rem;
        margin-top: 0px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tranding-slider-control .swiper-button-next {
        left: 58% !important;
        transform: translateX(-58%) !important;
    }

    @media (max-width: 990px) {
        .tranding-slider-control .swiper-button-next {
            left: 70% !important;
            transform: translateX(-70%) !important;
        }
    }

    @media (max-width: 450px) {
        .tranding-slider-control .swiper-button-next {
            left: 80% !important;
            transform: translateX(-80%) !important;
        }
    }

    @media (max-width: 990px) {
        .tranding-slider-control .swiper-button-prev {
            left: 30% !important;
            transform: translateX(-30%) !important;
        }
    }

    @media (max-width: 450px) {
        .tranding-slider-control .swiper-button-prev {
            left: 20% !important;
            transform: translateX(-20%) !important;
        }
    }

    .tranding-slider-control .slider-arrow {
        background: #551D60;
        width: 3.5rem;
        height: 3.5rem;
        border-radius: 50%;
        left: 42%;
        transform: translateX(-42%);
        filter: drop-shadow(0px 8px 24px rgba(18, 28, 53, 0.1));
    }

    .tranding-slider-control .slider-arrow ion-icon {
        font-size: 2rem;
        color: white;
    }

    .tranding-slider-control .slider-arrow::after {
        content: '';
    }

    .tranding-slider-control .swiper-pagination {
        position: relative;
        width: 15rem;
        bottom: 1rem;
    }

    .tranding-slider-control .swiper-pagination .swiper-pagination-bullet {
        filter: drop-shadow(0px 8px 24px rgba(18, 28, 53, 0.1));
    }

    .tranding-slider-control .swiper-pagination .swiper-pagination-bullet-active {
        background: #551D60;
    }

    #tranding {
        margin: -20px 0px 50px 0px;
        padding: 0 0 30px 0; 
    }

    .mute-button {
        position: absolute;
        top: 20px;
        left: 20px;
        z-index: 10;
        cursor: pointer;
    }

    .mute-button ion-icon {
        font-size: 2rem;
        color: white;
    }
</style>

 

 

4,162 Views
0 Likes
Report
In response to chris1532

chris1532
New Member
4 0 0
‎04-28-2024 07:39 AM

html { font-size: 62.5%; }

Basically this controls the size of the slides and the arrow navigation elements. 

But I don't understand why I can't make this happen with a normal selector

4,136 Views
0 Likes
Report
In response to chris1532

wo
Shopify Partner
188 42 42
‎04-29-2024 12:08 AM

html { font-size: 62.5%; }

This is not necessary. These global styles can be deleted completely. The size of the arrow is not controlled by this.

4,091 Views
0 Likes
Report
In response to wo

wo
Shopify Partner
188 42 42
‎04-29-2024 12:25 AM

I was curious about what your section looked like, so I added,  modified a little bit of style. This is what it looks like in the end.

wo_0-1714364620113.png

<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
<link rel="stylesheet" href="style.css">
<section id="tranding" style="background-color: #F7F7F7;">
  <div class="container">
    <div class="swiper tranding-slider">
      <div class="swiper-wrapper">
        <!-- Slide 1 -->
        <div class="swiper-slide tranding-slide">
          <div class="tranding-slide-img">
            <video
              src="https://cdn.shopify.com/videos/c/vp/a226a0fa5d384c6bafbc1014003143e0/a226a0fa5d384c6bafbc1014003143e0.HD-720p-1.6Mbps-25043029.mp4"
              muted loop></video>
            <div class="mute-button" onclick="toggleMute(this)">
              <ion-icon name="volume-off-outline"></ion-icon>
            </div>
          </div>
        </div>
        <!-- Slide 2 -->
        <div class="swiper-slide tranding-slide">
          <div class="tranding-slide-img">
            <video
              src="https://cdn.shopify.com/videos/c/vp/d10f7e7482fe44f9b4fc45eededc023d/d10f7e7482fe44f9b4fc45eededc023d.HD-1080p-2.5Mbps-25044573.mp4"
              muted loop></video>
            <div class="mute-button" onclick="toggleMute(this)">
              <ion-icon name="volume-off-outline"></ion-icon>
            </div>
          </div>
        </div>
        <!-- Slide 3 -->
        <div class="swiper-slide tranding-slide">
          <div class="tranding-slide-img">
            <video
              src="https://cdn.shopify.com/videos/c/vp/5b2b32024cec4a7fbf80d0190d10063d/5b2b32024cec4a7fbf80d0190d10063d.HD-1080p-2.5Mbps-25044559.mp4"
              muted loop></video>
            <div class="mute-button" onclick="toggleMute(this)">
              <ion-icon name="volume-off-outline"></ion-icon>
            </div>
          </div>
        </div>
        <!-- Slide 4 -->
        <div class="swiper-slide tranding-slide">
          <div class="tranding-slide-img">
            <video
              src="https://cdn.shopify.com/videos/c/vp/fd061bf6710e42adb94ebacab4209ff3/fd061bf6710e42adb94ebacab4209ff3.HD-1080p-2.5Mbps-25044598.mp4"
              muted loop></video>
            <div class="mute-button" onclick="toggleMute(this)">
              <ion-icon name="volume-off-outline"></ion-icon>
            </div>
          </div>
        </div>
      </div>

      <div class="tranding-slider-control">
        <div class="swiper-button-prev slider-arrow">
          <ion-icon name="arrow-back-outline"></ion-icon>
        </div>
        <div class="swiper-button-next slider-arrow">
          <ion-icon name="arrow-forward-outline"></ion-icon>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </div>
</section>

<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js">
</script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js" defer></script>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js" ></script>


<script>
  var TrandingSlider = new Swiper('.tranding-slider', {
    effect: 'coverflow',
    grabCursor: true,
    centeredSlides: true,
    loop: true,
    slidesPerView: 'auto',
    coverflowEffect: {
      rotate: 0,
      stretch: 0,
      depth: 100,
      modifier: 2.5,
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    on: {
      init: function () {
        var video = this.slides[this.activeIndex].querySelector('video');
        if (video) {
          video.play();
        }
      }
    }
  });

  // Handle video playback
  TrandingSlider.on('slideChange', function () {
    var slides = TrandingSlider.slides;
    for (var i = 0; i < slides.length; i++) {
      var video = slides[i].querySelector('video');
      if (video) {
        if (i === TrandingSlider.activeIndex) {
          video.play();
        } else {
          video.pause();
        }
      }
    }
  });

  // Toggle mute/unmute
  function toggleMute(button) {
    var video = button.parentElement.querySelector('video');
    if (video) {
      video.muted = !video.muted;
      button.querySelector('ion-icon').setAttribute('name', video.muted ? 'volume-off-outline' : 'volume-high-outline');
    }
  }

</script>

<style scoped>

  #tranding .swiper {
    font-size: 1.6rem;
    background: var(--bg);
  }

  #tranding .container {
    max-width: 124rem;
    margin: 0 auto;
  }

  .text-center {
    text-align: center;
  }

  .section-heading {
    font-size: 3rem;
    color: var(--primary);
    padding: 2rem 0;
  }

  #tranding {
    padding: 4rem 0;
  }

  @media (max-width: 1440px) {
    #tranding {
      padding: 7rem 0;
    }
  }

  #tranding .tranding-slider {
    height: 53rem;
    padding: 2rem 0;
    position: relative;
  }

  @media (max-width: 500px) {
    #tranding .tranding-slider {
      height: 51rem;
    }
  }

  .tranding-slide {
    width: 37rem;
    height: 42rem;
    position: relative;
    padding: 0px !important;
  }

  @media (max-width: 500px) {
    .tranding-slide {
      width: 28rem !important;
      height: 36rem !important;
    }

    .tranding-slide .tranding-slide-img img {
      width: 28rem !important;
      height: 36rem !important;
    }
  }

  .tranding-slide .tranding-slide-img video {
    width: 37rem;
    height: 42rem;
    border-radius: 2rem;
    /* Border Radius für die Videos */
    object-fit: cover;
  }
  @media (max-width: 500px) {
    .tranding-slide .tranding-slide-img video {
        width: 28rem;
        height: 36rem
     }
  }

  .tranding-slide .tranding-slide-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }

  .tranding-slide-content .food-price {
    position: absolute;
    top: 2rem;
    right: 2rem;
    color: var(--white);
  }

  .tranding-slide-content .tranding-slide-content-bottom {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    color: var(--white);
  }

  .food-rating {
    padding-top: 1rem;
    display: flex;
    gap: 12rem;
  }

  .rating ion-icon {
    color: var(--primary);
  }

  .swiper-slide-shadow-left,
  .swiper-slide-shadow-right {
    display: none;
  }

  .tranding-slider-control {
    position: relative;
    bottom: 1rem;
    margin-top: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .tranding-slider-control .swiper-button-next {
    left: 58% !important;
    transform: translateX(-58%) !important;
  }

  @media (max-width: 990px) {
    .tranding-slider-control .swiper-button-next {
      left: 70% !important;
      transform: translateX(-70%) !important;
    }
  }

  @media (max-width: 450px) {
    .tranding-slider-control .swiper-button-next {
      left: 80% !important;
      transform: translateX(-80%) !important;
    }
  }

  @media (max-width: 990px) {
    .tranding-slider-control .swiper-button-prev {
      left: 30% !important;
      transform: translateX(-30%) !important;
    }
  }

  @media (max-width: 450px) {
    .tranding-slider-control .swiper-button-prev {
      left: 20% !important;
      transform: translateX(-20%) !important;
    }
  }

  .tranding-slider-control .slider-arrow {
    background: #551D60;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    left: 42%;
    transform: translateX(-42%);
    filter: drop-shadow(0px 8px 24px rgba(18, 28, 53, 0.1));
  }

  .tranding-slider-control .slider-arrow ion-icon {
    font-size: 2rem;
    color: white;
  }

  .tranding-slider-control .slider-arrow::after {
    content: '';
  }

  .tranding-slider-control .swiper-pagination {
    position: relative;
    width: 15rem;
    bottom: 1rem;
  }

  .tranding-slider-control .swiper-pagination .swiper-pagination-bullet {
    filter: drop-shadow(0px 8px 24px rgba(18, 28, 53, 0.1));
  }

  .tranding-slider-control .swiper-pagination .swiper-pagination-bullet-active {
    background: #551D60;
  }

  #tranding {
    margin: -20px 0px 50px 0px;
    padding: 0 0 30px 0;
    /* Hier habe ich das Padding auf 2 Rem oben und unten reduziert */
  }

  /* Neues CSS für das Lautsprechersymbol */
  .mute-button {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
    cursor: pointer;
  }

  .mute-button ion-icon {
    font-size: 2rem;
    color: white;
  }
</style>

{% schema %}
{
  "name": "Video Slideshow",
  "presets": [
   {
    "name": "Video Slideshow"
    }
  ]

}
{% endschema %}

 

4,090 Views
0 Likes
Report

Community Blog Articles

shopp-e-1741972742895593780274096851.png
Canadian merchants: Update account details by March 24, 2025 to continue us...

Shopify and our financial partners regularly review and update verification requiremen...

By Jacqui Mar 14, 2025
Shopify_0-1741780029041.png
New learning path from Shopify Academy: How to create a digital marketing s...

Unlock the potential of marketing on your business growth with Shopify Academy's late...

By Shopify Mar 12, 2025
CRO-Community-Promo.jpg
Expert insights on conversion rate optimization (CRO) from Shopify Academy ...

Learn how to increase conversion rates in every stage of the customer journey by enroll...

By Shopify Mar 5, 2025
Terms of Service Privacy Policy