how I can add class (container) with 3 classes inside it in javascript in swiper script code below ?

johannes999 · 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

johannes999 · 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

dsonesuk · December 30, 2022

Being only a list of classes you are not required to use class identifier '.' at beginning.

johannes999 · 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

Sign In

how I can add class (container) with 3 classes inside it in javascript in swiper script code below ?

Recommended Posts

johannes999

Link to comment

Share on other sites

johannes999

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

johannes999

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity