<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="/images/slideshow/oliveto.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="/images/slideshow/olivo_paesaggio.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="/images/slideshow/estrazione_olio.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</div>
cosa devo fare
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="2000"><!-- Indicators --><ol class="carousel-indicators">
<li class="active" data-target="#myCarousel" data-slide-to="0"> </li>
<li data-target="#myCarousel" data-slide-to="1"> </li>
<li data-target="#myCarousel" data-slide-to="2"> </li>
<li data-target="#myCarousel" data-slide-to="3"> </li>
</ol><!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active"><img src="images/ImagoTest/Orizzontale1.jpg" alt="Orizzontale1" /><div class="carousel-caption">
<h3>Asiago</h3>
<p>Laghetto di montagna</p>
</div></div>
<div class="item"><img src="images/ImagoTest/Orizzontale2.jpg" alt="Orizzontale2" /><div class="carousel-caption">
<h3>Aereo</h3>
<p>In volo verso...</p>
</div></div>
<div class="item"><img src="images/ImagoTest/Orizzontale3.jpg" alt="Orizzontale3" /><div class="carousel-caption">
<h3>Mare</h3>
<p>Il mare al tramonto sulle coste pugliesi</p>
</div></div>
<div class="item"><img src="images/ImagoTest/Orizzontale4.jpg" alt="Orizzontale4" /><div class="carousel-caption">
<h3>Gorizia</h3>
<p>Panorama dal castello di Gorizia</p>
</div></div>
</div>
</div>limma mi correggo, funziona quasi...
le immaggini scorrono solo se clicco su uno di quei puntini altrimenti non scorrono in automatico
il template è protostar
il codice ho copiato quello che mi hai allegato tu (con le opportune modifiche dei nomi delle immagini)
niente di fatto.
come posso risolvere
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item"><p><img src="images/HomeIta.jpg" /></p></div>
<div class="item"><p><img src="images/HomeIta.jpg" /></p></div>
<div class="item"><p><img src="images/HomeIta.jpg" /></p></div>
</div>
<!-- Carousel nav -->
<a href="#myCarousel" class="carousel-control left" data-slide="prev">‹[/url] <a href="#myCarousel" class="carousel-control right" data-slide="next">›[/url]
</div><script>
!function ($) {
$(function(){
// carousel demo
$('#myCarousel').carousel()
})
}(window.jQuery)
</script>limma sei davvero brava, grazie.
ho notato che sulla destra compare un punto nero e se clicco mi fa andare avanti le slide. come posso elimirare questi punti neri?
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>sotto le slide avevo messo degli aritcoli con l'immagine ora dopo i tuoi suggerimenti li fa scorrore.
mi puoi suggerire come inserire degli articoli sulla home page
<div class="active item">
<p><img src="images/miaimmagine.jpg" /></p>
<div class="carousel-caption">
<p>Testo didascalia!</p>
</div>
</div><div id="myCarousel" class="carousel slide" data-interval="1000">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<p><img src="images/imago1.jpg" /></p>
<div class="carousel-caption">
<p>Testo didascalia!</p>
</div>
</div>
<div class="item">
<p><img src="images/imago2.jpg" /></p>
<div class="carousel-caption">
<p>Testo didascalia 2!</p>
</div>
</div>
<div class="item">
<p><img src="images/imago3.jpg" /></p>
<div class="carousel-caption">
<p>Testo didascalia 3!</p>
</div>
</div>
</div>
</div>
<script>
!function ($) {
$(function(){
// carousel demo
$('#myCarousel').carousel()
})
}(window.jQuery)
</script>
vorrei che le slide non fossere centrate al monitor ma che coprissero l'intero schemo da destra a sinistra come posso fare?