johannes999 Posted December 29, 2022 Share Posted December 29, 2022 hello, I have this code for my slider show <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script> <script> const swiper = new Swiper('.swiper', { autoplay: { delay:3000, disableOnInteraction:false, }, loop: true, pagination: { el: '.swiper-pagination', clickable:true, }, // Navigation arrows /* navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, */ }); </script> now I want to create class with name (container) which wil have 3 classes inside it . class1 class2 class3 . I want to use this classes inside slider on the top of the page with matgin-top = 10px. the first class wil have (menu) name the second class wil have (BMW Specialist) text and the third class wil have (customer satisfaction) text. I tried to do it in HTML but the problem is ? I can't insert class from outside slider . so I thought that it has to be in slider self . in javascript code of it. can you give me an example how to do it to create class container with 3 classes inside it in Javascript code of slider? do I have to begin with creating Cons + querySelectorAll. and add classLists can you give me an simple example ? I couldn't insert my url through link because of link text is not functioning . I tried to leave empty but it is not working. my url is : https://webdesignleren.com/ thanks Link to comment Share on other sites More sharing options...
johannes999 Posted December 30, 2022 Author Share Posted December 30, 2022 I have found this code in google and inserted in swiper scrip const element = document.querySelector("#info-container"); element.classList.add(".text1"); element.classList.add(".text2"); element.classList.add(".text3"); it didn't work then I tried this code: <script> const swiper = new Swiper('.swiper', { autoplay: { delay:3000, disableOnInteraction:false, }, loop: true, pagination: { el: '.swiper-pagination', clickable:true, }, const info-container = document.querySelectorAll('#info-container'); for (const info-container) { info-container.classList.add('.text1'); info-container.classList.add('.text2'); info-container.classList.add('.text3'); } // Navigation arrows /* navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, */ /*const element = document.querySelector("#info-container"); element.classList.add(".text1"); element.classList.add(".text2"); element.classList.add(".text3"); */ }); </script> it didn't work either . I have in my header.php this code ; <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="https://gmpg.org/xfn/11"> <link href="https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/min.js/0.2.3/$.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" /> <?php wp_head(); ?> </head> I have also the html code in header.php like this: <div class="site-header"> <!-- Slider main container --> <div class="swiper"> <!-- Additional required wrapper --> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide"> <img class="img-fluid1" src="https://webdesignleren.com/wp-content/uploads/2022/12/1920-1080-2.jpg" alt="Responsive image"></div> <div class="swiper-slide"> <img class="img-fluid2" src="https://webdesignleren.com/wp-content/uploads/2022/12/1920-1080-1.jpg" alt="Responsive image"></div> <div class="swiper-slide"> <img class="img-fluid3" src="https://webdesignleren.com/wp-content/uploads/2022/12/1920-1080.jpg" alt="Responsive image"></div> </div> </div> </div> <div id="info-container"> <div class="text1"> hello</div> <div class="text2"> hello hello hello hello</div> <div class="text3"> hello hello</div> </div> what it can be the problem or how I can solve it ? do I have also embed index.js or the problem is in the code? thanks Link to comment Share on other sites More sharing options...
dsonesuk Posted December 30, 2022 Share Posted December 30, 2022 Being only a list of classes you are not required to use class identifier '.' at beginning. Link to comment Share on other sites More sharing options...
johannes999 Posted January 3, 2023 Author Share Posted January 3, 2023 thanks , I understood that I am using swiper.js and all code is written in swiper.js and inserting of text has to be there. I found onother slider code in youtube . it is working very wel and I see I can insert text in the slider self as I wanted. now I have a little problem . after sliders repeat from 1 to 3 it is turning back to 1 afterwards not forwards . how I can solve this problem? this is the JS code: <script> var counter= 1; setInterval (function() { document.getElementById('radio' + counter).checked= true; counter++; if(counter > 3) { counter= 1; } }, 3200 ) ; </script> and this is HTML code: <div class="site-header"> <div class="slider"> <div class="slides"> <!-- radio buttons--> <input type="radio" name="radio-btn" id="radio1"> <input type="radio" name="radio-btn" id="radio2"> <input type="radio" name="radio-btn" id="radio3"> <!--slide images--> <div class="slide first"> <img class="img-fluid1" src="https://webdesignleren.com/wp-content/uploads/2022/12/1920-1080.jpg" alt="Responsive image"> </div> <div class="slide"> <img class="img-fluid2" src="https://webdesignleren.com/wp-content/uploads/2022/12/1920-1080-2.jpg" alt="Responsive image"> </div> <div class="slide"> <img class="img-fluid3" src="https://webdesignleren.com/wp-content/uploads/2022/12/1920-1080.jpg" alt="Responsive image"> </div> <!-- automatic navigation --> <div class="navigation-auto"> <div class="auto-btn1"> </div> <div class="auto-btn2"> </div> <div class="auto-btn3"> </div> </div> </div> <!-- manual navigation --> <div class="navigation-manual"> <label for="radio1" class="manual-btn"></label> <label for="radio2" class="manual-btn"></label> <label for="radio3" class="manual-btn"></label> </div> </div> and this is my url:https://webdesignleren.com/ thanks Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now