Ciao
ho un problema con un template acquistato. Non mi ero accorto che la slide non parte in automatico quando si carica la pagina, ma inizia a scorrere solo se si clicca sulla freccia. ( basta solo una volta e inizia a scorrere correttamente).
Secondo voi è possibile fare una modifica che permetta di iniziare subito lo scorrimento della slide?
Io ho fatto qualche tentativo, ma sono proprio alle basi con Javascript e non sono riuscito.
Vi posto il codice ( spero basti per capire)
HTML:
CSS:codice:<section id="main-slider" class="no-margin"> <div class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#main-slider" data-slide-to="0" class="active"></li> <li data-target="#main-slider" data-slide-to="1"></li> <li data-target="#main-slider" data-slide-to="2"></li> <li data-target="#main-slider" data-slide-to="4"></li> <li data-target="#main-slider" data-slide-to="5"></li> <li data-target="#main-slider" data-slide-to="6"></li> </ol> <div class="carousel-inner"> <div class="item active" style="background-image: url(images/slider/bg1.jpg)"> <div class="container"> <div class="row slide-margin"> <div class="col-sm-6"> <div class="carousel-content"> <h1 class="animation animated-item-1">Test testo 1</h1> <h2 class="animation animated-item-2">Test dettaglio testo 1</h2> </div> </div> <div class="col-sm-6 hidden-xs animation animated-item-4"> <div class="slider-img"> <img src="images/slider/img1.png" class="img-responsive"> </div> </div> </div> </div> </div><!--/.item--> <div class="item" style="background-image: url(images/slider/bg2.jpg)"> <div class="container"> <div class="row slide-margin"> <div class="col-sm-6"> <div class="carousel-content"> <h1 class="animation animated-item-1">Test testo 2</h1> <h2 class="animation animated-item-2">Test dettaglio testo 2</h2> </div> </div> <div class="col-sm-6 hidden-xs animation animated-item-4"> <div class="slider-img"> <img src="images/slider/img2.png" class="img-responsive"> </div> </div> </div> </div> </div><!--/.item--> </div><!--/.carousel-inner--> </div><!--/.carousel--> <a class="prev hidden-xs" href="#main-slider" data-slide="prev"> <i class="fa fa-chevron-left"></i> </a> <a class="next hidden-xs" href="#main-slider" data-slide="next"> <i class="fa fa-chevron-right"></i> </a> </section><!--/#main-slider-->
codice:#main-slider { position: relative; } .no-margin { margin: 0; padding: 0; } #main-slider .carousel .carousel-content { margin-top: 90px; } #main-slider .carousel .slide-margin{ margin-top: 30px; } #main-slider .carousel h2 { color: #fff; } #main-slider .carousel .btn-slide { padding: 8px 20px; background: #c52d2f; color: #fff; border-radius: 4px; margin-top: 25px; display: inline-block; } #main-slider .carousel .slider-img{ text-align: right; position: absolute; } #main-slider .carousel .item { background-position: 50%; background-repeat: no-repeat; background-size: cover; left: 0 !important; opacity: 0; top: 0; position: absolute; width: 100%; display: block !important; height: 400px; -webkit-transition: opacity ease-in-out 500ms; -moz-transition: opacity ease-in-out 500ms; -o-transition: opacity ease-in-out 500ms; transition: opacity ease-in-out 500ms; } #main-slider .carousel .item:first-child { top: auto; position: relative; } #main-slider .carousel .item.active { opacity: 1; -webkit-transition: opacity ease-in-out 500ms; -moz-transition: opacity ease-in-out 500ms; -o-transition: opacity ease-in-out 500ms; transition: opacity ease-in-out 500ms; z-index: 1; } #main-slider .prev, #main-slider .next { position: absolute; top: 50%; background-color: #c52d2f; color: #fff; display: inline-block; margin-top: -25px; height: 40px; line-height: 40px; width: 40px; line-height: 40px; text-align: center; border-radius: 4px; z-index: 5; } #main-slider .prev:hover, #main-slider .next:hover { background-color: #000; } #main-slider .prev { left: 10px; } #main-slider .next { right: 10px; } #main-slider .carousel-indicators li { width: 20px; height: 20px; background-color: #fff; margin: 0 15px 0 0; position: relative; } #main-slider .carousel-indicators li:after { position: absolute; content: ""; width: 24px; height: 24px; border-radius: 100%; background: rgba(0, 0, 0, 0); border: 1px solid #FFF; left: -3px; top: -3px; } #main-slider .carousel-indicators .active{ width: 20px; height: 20px; background-color: #c52d2f; margin: 0 15px 0 0; border: 1px solid #c52d2f; position: relative; } #main-slider .carousel-indicators .active:after { position: absolute; content: ""; width: 24px; height: 24px; border-radius: 100%; background: #c52d2f; border: 1px solid #c52d2f; left: -3px; top: -3px; } #main-slider .active .animation.animated-item-1 { -webkit-animation: fadeInUp 300ms linear 300ms both; -moz-animation: fadeInUp 300ms linear 300ms both; -o-animation: fadeInUp 300ms linear 300ms both; -ms-animation: fadeInUp 300ms linear 300ms both; animation: fadeInUp 300ms linear 300ms both; } #main-slider .active .animation.animated-item-2 { -webkit-animation: fadeInUp 300ms linear 600ms both; -moz-animation: fadeInUp 300ms linear 600ms both; -o-animation: fadeInUp 300ms linear 600ms both; -ms-animation: fadeInUp 300ms linear 600ms both; animation: fadeInUp 300ms linear 600ms both; } #main-slider .active .animation.animated-item-3 { -webkit-animation: fadeInUp 300ms linear 900ms both; -moz-animation: fadeInUp 300ms linear 900ms both; -o-animation: fadeInUp 300ms linear 900ms both; -ms-animation: fadeInUp 300ms linear 900ms both; animation: fadeInUp 300ms linear 900ms both; } #main-slider .active .animation.animated-item-4 { -webkit-animation: fadeInUp 300ms linear 1200ms both; -moz-animation: fadeInUp 300ms linear 1200ms both; -o-animation: fadeInUp 300ms linear 1200ms both; -ms-animation: fadeInUp 300ms linear 1200ms both; animation: fadeInUp 300ms linear 1200ms both; }
JAVASCRIPT
codice:jQuery(function($) {'use strict', //#main-slider $(function(){ $('#main-slider.carousel').carousel({ interval: 8000 }); }); // accordian $('.accordion-toggle').on('click', function(){ $(this).closest('.panel-group').children().each(function(){ $(this).find('>.panel-heading').removeClass('active'); }); $(this).closest('.panel-heading').toggleClass('active'); }); //Initiat WOW JS new WOW().init(); // portfolio filter $(window).load(function(){'use strict'; var $portfolio_selectors = $('.portfolio-filter >li>a'); var $portfolio = $('.portfolio-items'); $portfolio.isotope({ itemSelector : '.portfolio-item', layoutMode : 'fitRows' }); $portfolio_selectors.on('click', function(){ $portfolio_selectors.removeClass('active'); $(this).addClass('active'); var selector = $(this).attr('data-filter'); $portfolio.isotope({ filter: selector }); return false; }); }); // Contact form var form = $('#main-contact-form'); form.submit(function(event){ event.preventDefault(); var form_status = $('<div class="form_status"></div>'); $.ajax({ url: $(this).attr('action'), beforeSend: function(){ form.prepend( form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>').fadeIn() ); } }).done(function(data){ form_status.html('<p class="text-success">' + data.message + '</p>').delay(3000).fadeOut(); }); }); //goto top $('.gototop').click(function(event) { event.preventDefault(); $('html, body').animate({ scrollTop: $("body").offset().top }, 500); }); //Pretty Photo $("a[rel^='prettyPhoto']").prettyPhoto({ social_tools: false }); });
Rispondi quotando
