I am having trouble creating a drop down that will populate a script with variables passed using a form.
<form>
<fieldset>
<label for="speed">Speed:</label><br/>
<select id="speed" name="speed">
<option value="1000">1000</option>
<option value="2000">2000</option>
<option value="3000">3000</option>
<option value="4000">4000</option>
<option value="5000">5000</option>
<option value="6000">6000</option>
</select>
<br/><br/>
<label for="speed">Slides Per View:</label><br/>
<select id="slidesPerView" name="slidesPerView">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<br/><br/>
<button id="theButton">Select</button>
</fieldset>
</form>
<script>
document.getElementById("theButton").addEventListener("click", function(){
options;
});
</script>
<!-- Initialize Swiper -->
<script>
var options = {
speed:6000,
slidesPerView:2,
/* effect:autoplay, */
/* effect:coverflow, */
};
var swiper = new Swiper('.swiper-container, options', {
/* speed: 2000, */
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
effect:"coverflow",
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
loop: true,
});
</script>
Thanks in advance for your help.
I don’t understand your question.
onsubmit="myFunction(options)
Also, never use inline event handlers. It’s important to know how they work because a lot of old code has them. Use addEventListeners instead.
Crippled:
var options = { speed:6000, slidesPerView:2, /* effect:autoplay, / / effect:coverflow, */ };
I want to populate the speed and slidesPerView with the values in the form. Am I getting close?
My apologies, this is all new to me.
Thanks
There’s multiple things you can do to improve your code, but I’ll focus on your question.
The first thing is you’re missing a closing tag for your <button>.
Also you’re missing the Swiper object, unless you decided not to post it here. In any event you basically have to either remake a new Swiper object or modify your current Swiper object.
In your example you have swiper as the instantiated object. So, you need to update those properties to get the desired result.
In order to update them it’s simple. So like swiper.speed = 6000 updates the speed to 6000. swiper.slidesPerView = 4; updates that value to 4.
So now you need to accomplish 2 more things since you now know how to update.
document.querySelector('#speed').addEventListener('change', (evt) => {
const option_selected = evt.target;
swiper.speed = option_selected;
});
You’re using swiper in global space which you don’t want to do, but since you are, that is how you’d update it.
I hope you had a great weekend!
I apologize, I am still stuck.
<html>
<meta charset="utf-8">
<head>
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
<style>
html, body {
position: relative;
height: 100%;
}
body{
background: #ffffff;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container
{
width: 100%;
height: 50%;
padding: 0;
}
.swiper-slide {
width: 100%;
height: 50%;
/* New Additions */
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-button-prev,
.swiper-button-next {
position: absolute;
top: 25%;
width: calc(var(--swiper-navigation-size) / 44 * 27);
height: var(--swiper-navigation-size);
margin-top: calc(-1 * var(--swiper-navigation-size) / 2);
z-index: 10;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
/*color: var(--swiper-navigation-color, var(--swiper-theme-color));*/
color: #ff0000;
}
.autoplay
{
position: absolute;
color: #000;
font: 100px/100% arial, sans-serif;
right: 15px;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
top: 15px;
width:auto;
height:auto;
z-index:999;
opacity:0.4;
transition: opacity .1s ease-in, transform .1s ease-out;
animation: fade_close 3s ease-out;
}
@keyframes fade_close
{
0% { opacity: 0.8; }
50% { opacity: 0.8; }
to { opacity: 0.4; }
}
.autoplay:active
{
transform:scale(0.8);
}
.stop
{
right: 15px;
}
.play
{
right: 90px;
}
</style>
</head>
<body>
<script src="https://unpkg.com/swiper/js/swiper.js"></script>
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><img src="https://swiperjs.com/demos/images/nature-1.jpg"></div>
<div class="swiper-slide"><img src="https://swiperjs.com/demos/images/nature-2.jpg"></div>
<div class="swiper-slide"><img src="https://swiperjs.com/demos/images/nature-3.jpg"></div>
<div class="swiper-slide"><img src="https://swiperjs.com/demos/images/nature-4.jpg"></div>
<div class="swiper-slide"><img src="https://swiperjs.com/demos/images/nature-5.jpg"></div>
<div class="swiper-slide"><img src="https://swiperjs.com/demos/images/nature-6.jpg"></div>
<div class="swiper-slide"><img src="https://swiperjs.com/demos/images/nature-7.jpg"></div>
<div class="swiper-slide"><img src="https://swiperjs.com/demos/images/nature-8.jpg"></div>
<div class="swiper-slide"><img src="https://swiperjs.com/demos/images/nature-9.jpg"></div>
<div class="swiper-slide"><img src="https://swiperjs.com/demos/images/nature-10.jpg"></div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<!--div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div -->
<!-- If we need scrollbar -->
<!-- div class="swiper-scrollbar"></div -->
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination-white"></div>
<!-- Add Navigation -->
<div class="swiper-button-prev swiper-button-white"></div>
<div class="swiper-button-next swiper-button-white"></div>
</div>
<form>
<fieldset>
<label for="speed">Speed:</label><br/>
<select id="speed1" name="speed1">
<option value="1000">1000</option>
<option value="2000">2000</option>
<option value="3000">3000</option>
<option value="4000">4000</option>
<option value="5000">5000</option>
<option value="6000">6000</option>
</select>
<br/><br/>
<label for="slidesPerView">Slides Per View:</label><br/>
<select id="slidesPerView1" name="slidesPerView1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<br/><br/>
<button id="theButton">Submit</button>
</fieldset>
</form>
<script>
document.getElementById("theButton").addEventListener("click", function(){
options;
});
</script>
<!-- Initialize Swiper -->
<script>
/* var options = { */
var obj = { speed: 'speed1' };
/* effect:"autoplay", */
/* effect:"coverflow", */
/* }; */
var swiper = new Swiper('.swiper-container', {
/* speed: 2000, */
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
effect:"coverflow",
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
loop: true,
});
</script>
</body>
</html>