Название которое выводится над изображением
Описание к слайду Название кнопки к первому слайду
Название которое выводится над изображением
Описание к слайду http://kargoo.kz/content/view/89/321319494
Название которое выводится над изображением
Описание к слайду Название кнопки к первому слайду
Название которое выводится для изображения последнего слайда
Описание к последнему слайду Название кнопки к последнему слайду
jQuery(function(){ jQuery('#camera_wrap').camera({ height: '390px', loader: 'none', pagination: true, thumbnails: false, navigation: false, hover: false, opacityOnGrid: false, overlayer: true, playPause: false, time: 30000, imagePath: '/.s/t/1051/' }); });
.cap { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 auto; max-width: 960px; width: 100%; height: 0; border-right: 25px solid transparent; border-bottom: 28px solid #343434; border-left: 25px solid transparent; } .slider-row .cap:first-child { border-width: 0 20px 20px; } .slider-row { background: url(/.s/t/1051/sldr-bg.jpg) no-repeat 50% 0; } .slider { position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-bottom: 0 !important; padding: 20px; background: #373737; -webkit-box-shadow: 0px 40px 20px -28px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 40px 20px -28px rgba(0, 0, 0, 0.75); box-shadow: 0px 40px 20px -28px rgba(0, 0, 0, 0.75); text-align: center; } .slider img, .slider ol, .slider ul, .slider li, .slider table, .slider tbody, .slider tfoot, .slider thead, .slider tr, .slider th, .slider td { margin: 0; padding: 0; border: 0; background: none; list-style: none; vertical-align: baseline; font: inherit; font-size: 100%; } .slider { position: relative; z-index: 0; display: none; } .slider img { max-width: none!important; } .camera_fakehover { position: relative; z-index: 1; min-height: 60px; width: 100%; height: 100%; } .slider { width: 100%; } .camera_src { display: none; } .cameraCont, .cameraContents { position: relative; z-index: 1; width: 100%; height: 100%; } .cameraSlide { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; } .cameraContent { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: none; width: 100%; } .camera_target { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; overflow: hidden; width: 100%; height: 100%; text-align: left; } .camera_overlayer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; overflow: hidden; width: 100%; height: 100%; } .camera_target_content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; overflow: hidden; } .camera_target_content .camera_link { display: block; height: 100%; background: url(/imag/blank.gif); text-decoration: none; } .camera_nav_cont { position: absolute; top: 15px; right: 9px; z-index: 4; overflow: hidden; width: 120px; height: 65px; } .camerarelative { position: relative; overflow: hidden; } .imgFake { cursor: pointer; } .camera_command_wrap .hideNav { display: none; } .camera_command_wrap { position: relative; right:0; left: 0; z-index: 4; } .camera_pag { position: absolute; bottom: 13px; z-index: 1000; width: 100%; } .slider .camera_pag .camera_pag_ul { position: relative; display: inline-block; margin: 0 auto; padding: 0; min-width: 240px; background: #373737 url(/.s/t/1051/slider-pag-m.png) repeat 0 0; list-style: none; vertical-align: bottom; text-align: center; } .slider .camera_pag .camera_pag_ul:before, .slider .camera_pag .camera_pag_ul:after { position: absolute; top: 0; display: block; width: 30px; height: 32px; content: ''; } .slider .camera_pag .camera_pag_ul:before { left: -30px; background: url(/.s/t/1051/slider-pag-l.png) no-repeat 0 0; } .slider .camera_pag .camera_pag_ul:after { right: -30px; background: url(/.s/t/1051/slider-pag-r.png) no-repeat 0 0; } .slider .camera_pag .camera_pag_ul li { position: relative; display: inline-block; margin: 9px 2px 5px; width: 16px; height: 16px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; background-color: #4a4a4a; -webkit-box-shadow: inset 0px 1px 3px rgba(0,0,0,.7); -moz-box-shadow: inset 0px 1px 3px rgba(0,0,0,.7); box-shadow: inset 0px 1px 3px rgba(0,0,0,.7); text-align: left; text-indent: -9999px; cursor: pointer; } .slider .camera_pag .camera_pag_ul li:hover { background-color: #2e2e2e; -webkit-box-shadow: inset 0px 1px 3px rgba(0,0,0,.7); -moz-box-shadow: inset 0px 1px 3px rgba(0,0,0,.7); box-shadow: inset 0px 1px 3px rgba(0,0,0,.7); } .slider .camera_pag .camera_pag_ul li.cameracurrent { background-color: #73b52a; -webkit-box-shadow: inset 0px 1px 0px rgba(255,255,255,1); -moz-box-shadow: inset 0px 1px 0px rgba(255,255,255,1); box-shadow: inset 0px 1px 0px rgba(255,255,255,1); } .camera_pag_ul li img { position: absolute; display: none; } .camera_pag_ul .thumb_arrow { position: absolute; top: 0; left: 50%; margin-left: -4px; border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent; } .slider .camera_pag .camera_pag_ul li { position: relative; display: inline-block; margin: 9px 2px 5px; width: 16px; height: 16px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; text-indent: -9999px; cursor: pointer; } .camera_clear { display: block; clear: both; } .showIt { display: none; } .camera_clear { position: relative; display: block; clear: both; margin: -1px 0 25px; height: 1px; } .pattern .camera_overlayer { background: url(/.s/t/1051/slide-ol.png) repeat; } .camera_caption { position: absolute; top: 70px; left: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 20px 3px 20px 35px; width: 350px; background-color: #000; background-color: rgba(0,0,0,.5); color: #fff; text-align: left; font-family: 'Roboto Condensed', sans-serif; } .slide-ttl { margin: 0; padding: 0 0 10px; text-transform: uppercase; font-weight: bold; font-size: 30px; } .slide-descr { font-weight: normal; font-size: 12px; line-height: 1.6; } .camera_caption .btn-lnk { position: absolute; bottom: -50px; padding: 10px 24px; } /*------ slider style ------*/ @media screen and (max-width: 960px) { .cont-wrap { width: auto; } } @media screen and (max-width: 640px) { .slider-row .cap { display: none; } .slider { -webkit-box-shadow: 0px 10px 30px 0px #000; -moz-box-shadow: 0px 10px 30px 0px #000; box-shadow: 0px 10px 30px 0px #000; } .slider-row .cont-wrap { padding: 20px 0; background: #373737 url('/.s/t/1051/hatch.jpg') repeat-x 0 0; } }
