Адаптивный Слайдер С Тремя Боковыми Банерами
#1
Отправлено 19 Ноябрь 2014 - 09:49
#2
Отправлено 19 Ноябрь 2014 - 16:43
#3
Отправлено 19 Ноябрь 2014 - 16:49
Эбболка (19 Ноябрь 2014 - 16:43) писал:
Для начала давайте установим слайдер, инструкция здесь: http://storeland.ru/about/faq#51
#4
Отправлено 19 Ноябрь 2014 - 18:03
MikDark (19 Ноябрь 2014 - 16:49) писал:
#5
Отправлено 20 Ноябрь 2014 - 12:57
#6
Отправлено 20 Ноябрь 2014 - 14:35
#7
Отправлено 20 Ноябрь 2014 - 15:10
Эбболка (20 Ноябрь 2014 - 14:35) писал:
Из того слайдера, что установлен, сложно будет сделать реализацию вашей задумки.
Лучше скройте Ваш слайдер, найдя в шаблоне main.css код:
.slid { width: 1000px; }
и заменив на:
.slid { width: 1000px; display: none; }
а далее по инструкции установите nivo слайдер
#8
Отправлено 20 Ноябрь 2014 - 16:17
width: 1000px;
}
слайдер из темы я установила
Еще хочу сказать спасибо за ответы)
#10
Отправлено 20 Ноябрь 2014 - 16:29
может кому пригодиться потом, если будите делать по этой теме то
убираем основной слайдер так
в хтмл находите такие строчки
<div id="slider1_container" > <!-- Slides Container --> <div u="slides" class="slides_container ">и заменяете на такие
[html]
Danil (20 Ноябрь 2014 - 16:28) писал:
#11
Отправлено 20 Ноябрь 2014 - 17:34
#13
Отправлено 20 Ноябрь 2014 - 18:19
* */ html {-webkit-tap-highlight-color: rgba(0,0,0,0);display: block;} body {font-family: 'Ubuntu', sans-serif;height: 100%;width:100%;line-height: 1.6;font-size: 14px;-webkit-appearance: none;-webkit-font-smoothing: antialiased;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;overflow-x: hidden;background-color: #fff;margin: 0;padding: 0;color: #1e1e1e;background: url('"') repeat;} body.loaded {overflow-x: inherit;} * {margin:0;padding:0; border: 0;-webkit-tap-highlight-color: rgba(0,0,0,0);box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;-o-box-sizing: border-box;zoom: 1;} *:focus {outline: none !important;} *:before, *:after {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} @-webkit-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @-webkit-keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} } @keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} } /* Уведомления */ .success, .warning, .attention, .information {color: #fff;min-height: 34px;margin-bottom: 22px;overflow: hidden;padding: 20px;position: relative;text-shadow: none;-webkit-transition: opacity .3s linear;transition: opacity .3s linear;} .success {background: rgba(60, 60, 60, 0.5);border: 1px solid rgba(60, 60, 60, 0.5);-webkit-border-radius: 5px;-moz-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px;} .warning {background: #c10841;border: 1px solid #F8ACAC;-webkit-border-radius: 5px;-moz-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px;} .attention {background: #0098ca;border: 1px solid #F2DD8C;-webkit-border-radius: 5px;-moz-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px;} .information {background: #f89406;border: 1px solid #F2DD8C;-webkit-border-radius: 5px;-moz-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px;} .success .close, .warning .close, .attention .close, .information .close {float: right;padding-top: 4px;padding-right: 4px;cursor: pointer;} .help {color: #999;font-size: 10px;font-weight: normal;font-family: Verdana, Geneva, sans-serif;display: block;} .success a, .warning a, .attention a, .information a {color:#fff;font-weight:bold;font-size:16px;} .success:before {content: "\e116";font-family: icon;font-style: normal;font-weight: normal;display: block;line-height: 1;position: relative;font-size: 24px;float: left;margin-right: 20px;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} .warning:before {content: "\e60b";font-family: icon;font-style: normal;font-weight: normal;display: block;line-height: 1;position: relative;font-size: 24px;float: left;margin-right: 20px;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} .attention:before {content: "\e64c";font-family: icon;font-style: normal;font-weight: normal;display: block;line-height: 1;position: relative;font-size: 24px;float: left;margin-right: 20px;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} .error {margin: 0;color: #ffffff;background-color: #f89406;width: 200px;padding: 5px;margin-top: 5px;border: 1px solid #F2DD8C;-webkit-border-radius: 5px;-moz-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px;} .invalidInput {color:#cc003d;font-size:90%;display: block;padding-bottom: 10px;} /* Заголовки */ h1, h2, h3, h4, h5, h6 {font-weight: normal;line-height: 1.3;margin: 0 0 22px 10px;text-rendering: optimizelegibility;color:#1e1e1e;font-family: 'Arimo', sans-serif;word-wrap: break-word;} h1 {font-size: 42px;} h2 {font-size: 36px;} h3 {font-size: 30px;} h4 {font-size: 26px;} h5 {font-size: 22px;} h6 {font-size: 18px;} /* Ссылки */ a { background:transparent;color:#7f7f7f;text-decoration:none;} a:hover, a:focus {color:#000000;filter: alpha(opacity=80);-webkit-transition: opacity .2s linear;transition: opacity .2s linear; } a:active, a:hover{outline:0} a:active {color: #000;} a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px} p {margin-bottom: 22px; } p:last-child {margin-bottom: 0; } b,strong {font-weight: bold;} ol li { list-style-position: inside; } ul li { list-style-position: inside; } ul.unstyled, ol.unstyled {margin: 0;padding: 0;list-style: none!important;} table {border-collapse:collapse;border-spacing:0} td, th {padding:0} .added [class^="icon-"] {color:#000 !important;} img {vertical-align: middle;border: 0;max-width: 100%;height: auto;} fieldset {margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline} /* Настройки максимальных размеров генерируемых изображений */ .goods-image-icon {max-width:{SETTINGS_GOODS_IMAGES_SIZE_ICON | divide("2")}px; max-height:{SETTINGS_GOODS_IMAGES_SIZE_ICON | divide("2")}px} .goods-image-icon-square{width:{SETTINGS_GOODS_IMAGES_SIZE_ICON}px;height:{SETTINGS_GOODS_IMAGES_SIZE_ICON}px} .goods-image-small{/*max-width:{SETTINGS_GOODS_IMAGES_SIZE_SMALL | divide("2")}px;*/ max-height:{SETTINGS_GOODS_IMAGES_SIZE_SMALL | divide("2")}px} .goods-image-small-square {width:{SETTINGS_GOODS_IMAGES_SIZE_SMALL}px; height:{SETTINGS_GOODS_IMAGES_SIZE_SMALL}px} .goods-image-medium {max-width:{SETTINGS_GOODS_IMAGES_SIZE_MEDIUM | divide("2")}px; max-height:{SETTINGS_GOODS_IMAGES_SIZE_MEDIUM | divide("2")}px} .goods-image-medium-square{width:{SETTINGS_GOODS_IMAGES_SIZE_MEDIUM}px; height:{SETTINGS_GOODS_IMAGES_SIZE_MEDIUM}px} .goods-image-other{max-width:{SETTINGS_GOODS_IMAGES_SIZE_OTHER | divide("2")}px; max-height:{SETTINGS_GOODS_IMAGES_SIZE_OTHER | divide("2")}px} .goods-image-other-square {width:{SETTINGS_GOODS_IMAGES_SIZE_OTHER}px; height:{SETTINGS_GOODS_IMAGES_SIZE_OTHER}px} .goods-image-large{max-width:{SETTINGS_GOODS_IMAGES_SIZE_LARGE}px; max-height:{SETTINGS_GOODS_IMAGES_SIZE_LARGE}px} .goods-image-large-square {width:{SETTINGS_GOODS_IMAGES_SIZE_LARGE}px; height:{SETTINGS_GOODS_IMAGES_SIZE_LARGE}px} .goods-cat-image-icon {max-width:{SETTINGS_GOODS_IMAGES_SIZE_CAT_ICON | divide("2")}px; max-height:{SETTINGS_GOODS_IMAGES_SIZE_CAT_ICON | divide("2")}px} .goods-cat-image-icon-square{width:{SETTINGS_GOODS_IMAGES_SIZE_CAT_ICON}px; height:{SETTINGS_GOODS_IMAGES_SIZE_CAT_ICON}px} .goods-cat-image-medium {max-width:{SETTINGS_GOODS_IMAGES_SIZE_CAT_MEDIUM | divide("2")}px; max-height:{SETTINGS_GOODS_IMAGES_SIZE_CAT_MEDIUM | divide("2")}px} .goods-cat-image-medium-square{width:{SETTINGS_GOODS_IMAGES_SIZE_CAT_MEDIUM}px; height:{SETTINGS_GOODS_IMAGES_SIZE_CAT_MEDIUM}px} .goods-cat-image-other{max-width:{SETTINGS_GOODS_IMAGES_SIZE_CAT_OTHER | divide("2")}px; max-height:{SETTINGS_GOODS_IMAGES_SIZE_CAT_OTHER | divide("2")}px} .goods-cat-image-other-square {width:{SETTINGS_GOODS_IMAGES_SIZE_CAT_OTHER}px; height:{SETTINGS_GOODS_IMAGES_SIZE_CAT_OTHER}px} /* END Настройки максимальных размеров генерируемых изображений */ /****************************************************************************** Общие элементы *******************************************************************************/ .page-box {min-height: 100%;height: auto !important;height: 100%;} .page-box-content {padding-bottom: 370px;} .container {margin-right: auto;margin-left: auto;padding-left: 15px;padding-right: 15px;} .container-fluid{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px} .row{margin: 0 -15px;} .required em {color:#cc003d;} .htmlDataBlock {margin: 0 0 40px;} .m15 {margin:0 15px;} .blockquote {padding: 0 0 0 20px;margin: 0 0 22px;border-left: 2px solid #e1e1e1;list-style: none;} .cred {color:#cc003d;} .pb20 {padding-bottom:20px;} /* Классы стилей для текста */ .text-left{text-align:left} .text-right {text-align:right} .text-light {font-weight: normal;} .text-bold {font-weight: bold;} .text-center{text-align:center} .text-italic{font-style:italic;} .text-justify {text-align:justify} .fade{opacity:0;-webkit-transition:opacity .15s linear;-o-transition:opacity .15s linear;transition:opacity .15s linear} .fade.in{opacity:1} .center-block{display:block;margin-left:auto;margin-right:auto} .right{float:right !important} .left{float:left !important} .hide{display:none !important} .show{display:block !important} .invisible{visibility:hidden} .text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0} .hidden{display:none !important;visibility:hidden !important} .affix{position:fixed;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)} .clearfix:before, .clearfix:after, .container:before, .container:after, .row:before,.row:after, .navbar-collapse:before, .navbar-collapse:after, .nav:before,.nav:after, .navbar:before, .navbar:after, .navbar-header:before, .navbar-header:after, .top-navbar:before, .top-navbar:after {content:" ";display:table} .clearfix:after, .container:after, .row:after, .navbar-collapse:after, .nav:after, .navbar:after {clear:both} .fancybox-margin {margin-right: 17px !important;} /* Формы */ button, html input[type="button"], input[type="reset"], input[type="submit"] {-webkit-appearance:button;cursor:pointer} .form-control { display:block; width:100%; min-height:20px; height:40px; padding: 8px 12px; font-size: 12px; color:#555; background-color:#fff; background-image:none; margin-bottom: 22px; border: 1px solid #e1e1e1; border-radius:4px; -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075); box-shadow:inset 0 1px 1px rgba(0,0,0,0.075); -webkit-transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s; width:200px; } .form-select, #form_date { background: #fff; color:#555; font-size: 12px; margin: 0 0 20px 0; padding: 8px 12px; height:40px; max-width:150px; border: 1px solid #e1e1e1; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 1px #fff, inset 0 1px 4px rgba(0,0,0,.15); -moz-box-shadow: 0 1px #fff, inset 0 1px 4px rgba(0,0,0,.15); box-shadow: 0 1px #fff, inset 0 1px 4px rgba(0,0,0,.15); -webkit-transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s; } .form-control::-moz-placeholder{color:#777;opacity:1} .form-control:-ms-input-placeholder{color:#777} .form-control::-webkit-input-placeholder{color:#777} .form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control{cursor:not-allowed;background-color:#eee;opacity:1} .form-control:focus {-webkit-box-shadow: 0 0 10px rgba(46,84,129,.3);-moz-box-shadow: 0 0 10px rgba(46,84,129,.3);box-shadow: 0 0 10px rgba(46,84,129,.3);border: solid 1px #839bb7;outline: none;-webkit-transition:border linear .2s,box-shadow linear .2s;-moz-transition:border linear .2s,box-shadow linear .2s;transition:border linear .2s, box-shadow linear .2s;} .input-text {border: 1px solid #e1e1e1;-webkit-box-shadow: 0 1px #fff, inset 0 1px 4px rgba(0,0,0,.15);-moz-box-shadow: 0 1px #fff, inset 0 1px 4px rgba(0,0,0,.15);box-shadow: 0 1px #fff, inset 0 1px 4px rgba(0,0,0,.15);-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 12px;margin: 10px 0;min-height: 40px;padding: 8px 12px;-webkit-appearance: none;width: 200px;} .textarea {border: 1px solid #e1e1e1;-webkit-box-shadow: 0 1px #fff, inset 0 1px 4px rgba(0,0,0,.15);-moz-box-shadow: 0 1px #fff, inset 0 1px 4px rgba(0,0,0,.15);box-shadow: 0 1px #fff, inset 0 1px 4px rgba(0,0,0,.15);-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 12px;line-height: 14px;margin-bottom: 22px;min-height: 60px;padding: 8px 12px;-webkit-appearance: none;width: 200px;} .best-sellers, .new-products, .related-products {clear:both;text-align:center;} /****************************************************************************** Header Шапка *********************************
Аккаунт SL-319808
#14
Отправлено 20 Ноябрь 2014 - 19:55
#15
Отправлено 20 Ноябрь 2014 - 21:45
#16
Отправлено 21 Ноябрь 2014 - 02:34
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных