Using Swiper/Slider & Modal?

2 replies·opened Nov 23, 2016
S
symonNov 23, 2016

Using the Swiper/Slider feature and would like to have one of my slides include a button to pop open a modal specific to that one slide. However, when I put the code into the individual slider it pops the modal inside the slider and then breaks the swiper all together. Can I link to a modal from inside a slide? Here is the code snippet for top of slider. Thanks.

<section id="slider" class="slider-parallax swiper_wrapper clearfix" style="height: 550px;" data-loop="true" data-autoplay="5000"  data-speed="600">

			<div class="swiper-container swiper-parent">
				<div class="swiper-wrapper">

					<div class="swiper-slide" style="background-image: url('images/ma2016/cyber.jpg'); background-position: center top;">
						<div class="container clearfix">
							<div class="slider-caption">
								<h2>Cyber Monday Loan Special</h2>
								<h2><span>Monday, November 28 ONLY beginning at 8:30 a.m.</span></h2>
								
								<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

								<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
									<div class="modal-dialog modal-lg">
										<div class="modal-body">
											<div class="modal-content dark" style="background: url('images/ma2016/cyber.jpg') no-repeat; background-size: cover; max-width: 700px;">
												<div class="modal-header">
													<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
													<h4 class="modal-title" id="myModalLabel">Modal Heading</h4>
												</div>
												<div class="modal-body">
													<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.;</p>
													<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
													<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
													<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
													<p class="nobottommargin">Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
												</div>
											</div>
										</div>
									</div>
								</div>
															
							</div>
						</div>
					</div>
S
SemiColonWebSTAFFNov 24, 2016

Hello,

Simply move the Modal (.modal) Code outside the #wrapper Container and your issues will be solved automatically.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

S
symonNov 27, 2016

That worked perfect! Thanks for the quick solution!

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard
Using Swiper/Slider & Modal? · Canvas Template Support