Video Swiper Slider issues

chris1532
New Member
4 0 0

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

Replies 6 (6)

wo
Shopify Partner
77 20 17

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

 

chris1532
New Member
4 0 0

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 💩

chris1532
New Member
4 0 0

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>

 

 

chris1532
New Member
4 0 0

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

wo
Shopify Partner
77 20 17

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.

wo
Shopify Partner
77 20 17

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 %}