Slide 2025-07-20 |
დასახელება: Slide ავტორი: saba-web სისტემა: ყველა დემო: Click აღწერა: კიდევ ერთი ძალიან მაგარი სლაიდერია ვისაც მოგოწნთ დაყენეთ 100% მუშა ჩასვით სასურველ ადგილას Code <style> #slider { position:absolute !important; top:50%; left:50%; width:650px; height:350px; margin-top:-175px; margin-left:-325px; -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2); -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2); box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2); } .nivoSlider img { position:absolute; top:0; left:0; display:none; } .nivoSlider a { border:0; display:block; } .nivo-slice { display:block; position:absolute; z-index:5; height:100%; } .nivo-box { display:block; position:absolute; z-index:5; } .nivo-caption { position:absolute; left:75px; bottom:29px; width:498px; padding-top:13px; padding-bottom:13px; z-index:8; border:1px solid #000; border-left-color:rgba(0,0,0,.5); border-right-color:rgba(0,0,0,.5); -webkit-box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7); -moz-box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7); box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7); background: -webkit-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%); background: -moz-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%); background: -o-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%); background: -ms-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%); background: linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e648494c', endColorstr='#e6262728',GradientType=0 ); -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; } .nivo-caption p { margin:0; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:14px; font-weight:bold; color:#fff; text-align:center; text-shadow:0px -1px 0px #000; } .nivo-caption a { display:inline !important; } .nivo-html-caption { display:none; } .nivo-directionNav a { position:absolute; bottom:30px; z-index:9; cursor:pointer; text-indent:-9999px; width:45px; height:39px; background-image:url(http://2.bp.blogspot.com/-g_Eipd24SIQ/UBwSRk_nXBI/AAAAAAAACz0/lVsc6AvQWzo/s1600/helperblogger.com-arrows.png); background-repeat:no-repeat; } .nivo-prevNav { left:75px; background-position:0 0; box-shadow: 1px 0px 0px rgba(255,255,255,.2), 2px 0px 0px rgba(0,0,0,.4); } .nivo-nextNav { right:77px; background-position:-45px 0px; box-shadow: -1px 0px 0px rgba(255,255,255,.2), -2px 0px 0px rgba(0,0,0,.4); } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="http://www.code.helperblogger.com/jquery.nivo.slider.js"></script> <script type="text/javascript"> $(window).load(function () { $('.nivoSlider').nivoSlider({ effect: 'sliceDown', directionNavHide: false, captionOpacity: 1, controlNav: false }); }); </script> <div id="slider" class="nivoSlider"> <img src="http://4.bp.blogspot.com/-oXh96HmmJXI/UBwRGFfZxiI/AAAAAAAACzs/BKCay8mJcvE/s1600/helperblogger.com-5.png" alt="Slider Image 1" title="This Is An Example Of A Caption"> <img src="http://3.bp.blogspot.com/-O6gjNPiebwc/UBwREzdVzPI/AAAAAAAACzk/QdXbjGYwclM/s1600/helperblogger.com-4.png" alt="Slider Image 2" title="You Can Add Anything Here"> <img src="http://2.bp.blogspot.com/-7g47XCf9U2Y/UBwRCh7WkaI/AAAAAAAACzc/4pmq9IXY5zk/s1600/helperblogger.com-3.png" alt="Slider Image 2" title="Like Image Description"> <img src="http://4.bp.blogspot.com/-FTx7ipAY2z4/UBwRAaa5eRI/AAAAAAAACzU/Ozp_LQHhIHs/s1600/helperblogger.com-2.png" alt="Slider Image 2" title="Image Info"> <img src="http://4.bp.blogspot.com/-6yJQkb7_z8s/UBwQ-BqQKRI/AAAAAAAACzM/xtaCrM9BhCg/s1600/helperblogger.com-1.png" alt="Slider Image 2" title="And Other Things"> </div> ტეგები: |
სულ კომენტარები: 0 | |