Issue with animated slider
My animated slider on my home page is not functioning properly for some reason. I've been trying to figure out how to fix this to no avail. Can someone please help me out. Thanks in advance.
My site: http://10meijin.com/
- <!-- header slider -->
- <div class="header_slider">
- <div class="banner-container">
- <div class="banner">
- <ul>
- <li data-transition="fade" data-slotamount="10" data-masterspeed="300">
- <img src="{{url('/photos/slider_111.jpg')}}" alt="" width="940" height="356">
- </li>
- <li data-transition="fade" data-slotamount="10" data-masterspeed="300">
- <img src="{{url('/photos/slider_12.jpg')}}" alt="" width="940" height="356">
- </li>
- <li data-transition="fade" data-slotamount="10" data-masterspeed="300">
- <img src="{{url('/photos/slider_1_3.jpg')}}" alt="" width="940" height="356">
-
- </li>
- </ul>
- </div>
- </div>
- <script>
- $(document).ready(function () {
- if ($.fn.cssOriginal != undefined)
- $.fn.css = $.fn.cssOriginal;
- $('.banner').revolution({
- delay: 5000,
- startwidth: 940,
- startheight: 356,
- onHoverStop: "on", // Stop Banner Timet at Hover on Slide on/off
- hideThumbs: 0,
- navigationType: "none", // bullet, thumb, none
- navigationArrows: "solo", // nexttobullets, solo (old name verticalcentered), none
- navigationStyle: "round", // round,square,navbar,round-old,square-old,navbar-old, or any from the list in the docu (choose between 50+ different item), custom
- navigationHAlign: "center", // Vertical Align top,center,bottom
- navigationVAlign: "center", // Horizontal Align left,center,right
- soloArrowLeftHalign: "left",
- soloArrowLeftValign: "center",
- soloArrowLeftHOffset: -29,
- soloArrowLeftVOffset: 0,
- soloArrowRightHalign: "right",
- soloArrowRightValign: "center",
- soloArrowRightHOffset: -29,
- soloArrowRightVOffset: 0,
- touchenabled: "on", // Enable Swipe Function : on/off
- stopAtSlide: -1, // Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0, then it stops already in the first Loop at slide X which defined. -1 means do not stop at any slide. stopAfterLoops has no sinn in this case.
- stopAfterLoops: -1, // Stop Timer if All slides has been played "x" times. IT will stop at THe slide which is defined via stopAtSlide:x, if set to -1 slide never stop automatic
- hideCaptionAtLimit: 0, // It Defines if a caption should be shown under a Screen Resolution ( Basod on The Width of Browser)
- hideAllCaptionAtLilmit: 0, // Hide all The Captions if Width of Browser is less then this value
- hideSliderAtLimit: 0, // Hide the whole slider, and stop also functions if Width of Browser is less than this value
- fullWidth: "off",
- shadow: 0 //0 = no Shadow, 1,2,3 = 3 Different Art of Shadows - (No Shadow in Fullwidth Version !)
- });
- });
- </script>
- </div>
- <!--/ header slider -->
/*-----------------------------------*/
/* Header Sliders */
/*-----------------------------------*/
.header_slider {
position:relative;
background:#fff;
border-radius:10px;
-webkit-border-radius:10px;
margin:0 auto 15px auto;
width:940px;
height:356px;
border:10px solid #fff}
.header_slider .banner ul {
list-style:none;
padding:0;
margin:0}
.header_slider .banner img {
border-radius:10px;
-webkit-border-radius:10px;}
.slide_descr,
.slide_line {
width:360px;
text-shadow:0 1px 1px rgba(0,0,0, 0.35);
font-size:15px;
color:#fff;
line-height:1.4em;}
.slide_descr {
height:5.4em;
overflow:hidden}
.slide_title1,
.slide_title2 {
font-family: 'Signika Negative', sans-serif;
font-weight:600;
text-shadow:0 1px 1px rgba(0,0,0, 0.25);
line-height:1.1em;}
.slide_title1 {
font-size:29px;
color:#fffbdf}
.tp-caption.slide_title2 {
font-size:49px;
color:#fff;}
.slide_descr {
white-space: normal !important;}
.slide_line {
height:2px;
background:#fff08c;
-webkit-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.1);}
.btn_slider {
height:42px;
display:inline-block;
line-height:42px;
border:3px solid #c1e6eb;
border-radius:21px;
-webkit-border-radius:21px;
padding:0 35px;
background:url(images/button_sprite.png) 0 0 repeat-x;
color:#fff;
font-size:24px;
font-family: 'Nunito', sans-serif;
font-weight:bold;
-webkit-box-shadow: 0px 10px 5px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 10px 5px 0px rgba(0, 0, 0, 0.2);}
.btn_slider span {
display:block;
color:#fff;
text-shadow:0 1px 1px rgba(0,0,0, 0.25);}
.btn_slider:hover {
background-position:0 -42px}
.header_slider .tp-leftarrow.default,
.header_slider .tp-rightarrow.default {background:url(images/slider_arrows.png) no-repeat 0 0; width:56px; height:56px;}
.header_slider .tp-rightarrow.default {
background-position:right top}
.header_slider .tp-leftarrow:hover {background-position:left -56px;}
.header_slider .tp-rightarrow:hover{background-position:right -56px;}
.header_slider .tp-leftarrow:active {background-position:left -112px;}
.header_slider .tp-rightarrow:active {background-position:right -112px;}