Problema Carousel Bootstrap 3

Eppe

il 17 apr 2015, 15:04

3 risposte

Eppe

Pochi posts

Iscritto da: apr, 2015

Messaggi:: 2

Problema Carousel Bootstrap 3

17 apr 2015, 15:34

Ciao a tutti,
ho un problema con le frecce di controllo del carousel di Bootstrap:
quando clicco sulle frecce invece di far scorrere l'immagine successiva scorre la pagina...
Qualcuno mi sa aiutare? potrebbe essere qualche conflitto?
Grazie mille in anticipo!

3 Risposte

D
dome68
Pochi posts
Iscritto da
dic, 2014
Messaggi:
13
Re: Problema Carousel Bootstrap 3
17 apr 2015, 15:53
Per capire dov'è l'errore sarebbe utile vedere il codice della pagina altrimenti si va alla cieca. Se lo posti è meglio, almeno la porzione relativo al crousel.
E
Eppe
Pochi posts
Iscritto da
apr, 2015
Messaggi:
2
Re: Problema Carousel Bootstrap 3
17 apr 2015, 16:08
Hai ragione...
dimenticavo che il carousel è detro una finenestra modale...


<div class="modal fade" id="Modal-prova1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h5 class="modal-title" id="myModalLabel">Prova1</h5>
</div>
<div class="modal-body">
<div id="carousel-prova1" class="carousel slide">

<ol class="carousel-indicators">
<li data-target="#carousel-prova1" data-slide-to="0" class="active"></li>
<li data-target="#carousel-prova1" data-slide-to="1"></li>
<li data-target="#carousel-prova1" data-slide-to="2"></li>
<li data-target="#carousel-prova1" data-slide-to="3"></li>
</ol>

<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/vita/prova1-1.jpg" alt="">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="images/vita/prova1-2.jpg" alt="">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="images/vita/prova1-3.jpg" alt="">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="images/vita/prova1-4.jpg" alt="">
<div class="carousel-caption">
</div>
</div>
</div>
</div>

<a class="left carousel-control" href="#carousel-prova1" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-prova1" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>

dome68

Pochi posts

Iscritto da: dic, 2014

Messaggi:: 13

Re: Problema Carousel Bootstrap 3

27 apr 2015, 09:20

Scusami per il ritardo ma alla fine sono riuscito a dare un'occhiata al tuo codice che sinceramente mi sembra corretto e funziona perfettamente solo su Chrome, su Firefox non funziona, su IE invece non compaiono le frecce a dx e sx.
Per provare il tuo codice ho utilizzato bracket e ho solamente aggiunto un button per richiamare il modal ma, ti ripeto, funziona correttamente in Chrome ma non in Firefox e IE, non saprei perchè.
Ti riporto di seguito il codice che ho utilizzato.

<!DOCTYPE html>
<html lang="">
<head>
				<meta charset="UTF-8">
				<meta name="viewport" content="width=device-width, initial-scale=1.0">
				<meta name="description" content="">
				<meta name="author" content="">
				<title>Starter Template for Bootstrap 3.3.4</title>
				<link rel="shortcut icon" href="">
				<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
				<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
				<style>body{padding-top:50px;}.starter-template{padding:40px 15px;text-align:center;}</style>

				<!--[if IE]>
								<script src="https://cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
								<script src="https://cdn.jsdelivr.net/respond/1.4.2/respond.min.js"></script>
				<![endif]-->
</head>

<body>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#Modal-prova1">Launch demo modal</button>

<!-- Modal Vita-prova1-images -->
<div class="modal fade" id="Modal-prova1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h5 class="modal-title" id="myModalLabel">Prova1</h5>
			</div>
			<div class="modal-body">
				<div id="carousel-prova1" class="carousel slide">
				<!-- Indicators -->
				<ol class="carousel-indicators">
				<li data-target="#carousel-prova1" data-slide-to="0" class="active"></li>
				<li data-target="#carousel-prova1" data-slide-to="1"></li>
				<li data-target="#carousel-prova1" data-slide-to="2"></li>
				<li data-target="#carousel-prova1" data-slide-to="3"></li>
				</ol>
				<!-- Wrapper for slides -->
					<div class="carousel-inner" role="listbox">
						<div class="item active">
							<img src="images/vita/prova1-1.jpg" alt="">
							<div class="carousel-caption"></div>
						</div>
						<div class="item">
							<img src="images/vita/prova1-2.jpg" alt="">
							<div class="carousel-caption"></div>
						</div>
						<div class="item">
							<img src="images/vita/prova1-3.jpg" alt="">
							<div class="carousel-caption"></div>
						</div>
						<div class="item">
							<img src="images/vita/prova1-4.jpg" alt="">
							<div class="carousel-caption"></div>
						</div>
					</div>
				</div>
				<!-- Controls -->
				<a class="left carousel-control" href="#carousel-prova1" role="button" data-slide="prev">
				<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
				</a>
				<a class="right carousel-control" href="#carousel-prova1" role="button" data-slide="next">
				<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
				</a>
			</div>
		</div>
	</div>
</div>

				<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
				<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>

Devi accedere o registrarti per scrivere nel forum

3 risposte