.flickerplate { position:relative; width:100%;min-width:1200px; height:600px; background-color:#e6e6e6; overflow:hidden;margin:0 auto; } .flickerplate ul.flicks { width:10000%; height:100%; padding:0px; margin:0px; list-style:none } .flickerplate ul.flicks>li { float:left; width:1%; height:100%; background-position:center; background-size:cover; /*display:table*/ } .flickerplate ul.flicks>li .flick-inner { height:100%; padding:0px; color:#fff; /*display:table-cell; vertical-align:middle*/ } .flickerplate ul.flicks>li .flick-inner .flick-content { margin-left:auto; margin-right:auto } .flickerplate ul.flicks>li .flick-title { padding:0px 0px; font-size:2.778em; line-height:1.995em; text-align:center; display:none;/*纯图片,不要显示文字*/ } .flickerplate ul.flicks>li .flick-sub-text { padding:5px; font-weight:300; line-height:2.5em; color:rgba(255, 255, 255, 0.8); text-align:center; display:none;/*纯图片,不要显示文字*/ } .flickerplate ul.flicks>li .flick-title span.flick-block-text, .flickerplate ul.flicks>li .flick-sub-text span.flick-block-text { padding:12px 18px; background-color:rgba(0, 0, 0, 0.6) } .flickerplate .arrow-navigation { position:absolute; height:80%; width:10%; top:10%; z-index:100; overflow:hidden; cursor: pointer; } .flickerplate .arrow-navigation .arrow { display:block; height:100%; width:90%; -webkit-transition:all 0.2s ease-out; -moz-transition:all 0.2s ease-out; -o-transition:all 0.2s ease-out; -ms-transition:all 0.2s ease-out; transition:all 0.2s ease-out } .flickerplate .arrow-navigation:hover, .flickerplate .arrow-navigation .arrow:hover { cursor:pointer } .flickerplate .arrow-navigation.left { left:5% } .flickerplate .arrow-navigation.left .arrow { opacity:0.3; margin:0px 0px 0px 50%; background-image:url("arrow-left-light.png"); background-repeat:no-repeat; background-position:left } .flickerplate .arrow-navigation.right { right:5% } .flickerplate .arrow-navigation.right .arrow { opacity:0.3; margin:0px 0px 0px -50%; background-image:url("arrow-right-light.png"); background-repeat:no-repeat; background-position:right } .flickerplate .arrow-navigation.left.hover .arrow { opacity:1; margin:0px 0px 0px 20% } .flickerplate .arrow-navigation.right.hover .arrow { opacity:1; margin:0px 0px 0px -20% } .flickerplate .center {background:none; } .flickerplate .dot-navigation { position: absolute; bottom: 15px; width: 100%; text-align: center; z-index: 100 } .flickerplate .dot-navigation ul { text-align:center; list-style:none; padding:0px 15px; } .flickerplate .dot-navigation ul li { display:inline-block; float:none } .flickerplate .dot-navigation .dot { width:14px; height:14px; margin:0px 6px; background-color:rgba(255, 255, 255, 0.3); border-radius:50%; -o-border-radius:50%; -ms-border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; -webkit-transition:background-color 0.2s ease-out; -moz-transition:background-color 0.2s ease-out; -o-transition:background-color 0.2s ease-out; -ms-transition:background-color 0.2s ease-out; transition:background-color 0.2s ease-out } .flickerplate .dot-navigation .dot:hover { cursor:pointer; background-color:rgba(255, 255, 255, 0.6) } .flickerplate .dot-navigation .dot.active { background-color:#fff } .flickerplate .dot-navigation.left, .flickerplate .dot-navigation.left ul { text-align:left } .flickerplate .dot-navigation.right, .flickerplate .dot-navigation.right ul { text-align:right } .flickerplate.flicker-theme-dark .arrow-navigation.left .arrow { background-image:url("arrow-left-dark.png") } .flickerplate.flicker-theme-dark .arrow-navigation.right .arrow { background-image:url("arrow-right-dark.png") } .flickerplate.flicker-theme-dark .dot-navigation .dot { background-color:rgba(0, 0, 0, 0.12) } .flickerplate.flicker-theme-dark .dot-navigation .dot:hover { background-color:rgba(0, 0, 0, 0.6) } .flickerplate.flicker-theme-dark .dot-navigation .dot.active { background-color:#000 } .flickerplate.flicker-theme-dark ul.flicks li .flick-inner { color:rgba(0, 0, 0, 0.9) } .flickerplate.flicker-theme-dark ul.flicks li .flick-inner .flick-content .flick-sub-text { color:rgba(0, 0, 0, 0.9) } .flickerplate.flicker-theme-dark ul.flicks li .flick-inner .flick-content .flick-title span.flick-block-text, .flickerplate.flicker-theme-dark ul.flicks li .flick-inner .flick-content .flick-sub-text span.flick-block-text { background-color:rgba(255, 255, 255, 0.5) } .flickerplate ul.flicks li.flick-theme-dark .flick-inner { color:rgba(0, 0, 0, 0.9) } .flickerplate ul.flicks li.flick-theme-dark .flick-inner .flick-content .flick-sub-text { color:rgba(0, 0, 0, 0.9) } .flickerplate ul.flicks li.flick-theme-dark .flick-inner .flick-content .flick-title span.flick-block-text, .flickerplate ul.flicks li.flick-theme-dark .flick-inner .flick-content .flick-sub-text span.flick-block-text { background-color:rgba(255, 255, 255, 0.5) } .flickerplate.animate-transform-slide ul.flicks { -webkit-perspective:1000; -webkit-backface-visibility:hidden; transform:translate3d(0%, 0px, 0px); -webkit-transform:translate3d(0%, 0px, 0px); -webkit-transition:-webkit-transform 0.6s; -o-transition:-o-transform 0.6s; -moz-transition:-moz-transform 0.6s; transition:transform 0.6s } .flickerplate.animate-transition-slide ul.flicks { position:relative; left:0%; -webkit-transition:left 0.4s ease-out; -moz-transition:left 0.4s ease-out; -o-transition:left 0.4s ease-out; -ms-transition:left 0.4s ease-out; transition:left 0.4s ease-out } .flickerplate.animate-jquery-slide ul.flicks { position:relative; left:0% } .flickerplate.animate-scroller-slide { padding-bottom:0px; overflow:auto } .flickerplate.animate-scroller-slide ul.flicks { position:auto; } @media only screen and (max-width: 780px) { .flickerplate ul.flicks>li .flick-title {font-size:16px} .flickerplate { position:relative; width:100%;max-width:750px;min-width:320px; height:45vw; max-height:650px; background-color:#e6e6e6; overflow:hidden;margin:0 auto; } .flick-content img { width:100%;max-width:750px;} .flickerplate ul.flicks > li { } .flickerplate .arrow-navigation { position:absolute; height:80%; width:27px; top:10%; z-index:100; overflow:hidden; cursor: pointer; } .flickerplate .arrow-navigation .arrow { display:block; height:100%; width:100%; -webkit-transition:all 0.2s ease-out; -moz-transition:all 0.2s ease-out; -o-transition:all 0.2s ease-out; -ms-transition:all 0.2s ease-out; transition:all 0.2s ease-out } .flickerplate .arrow-navigation.left { left:10px } .flickerplate .arrow-navigation.left .arrow { opacity:0.3; margin:0px 0px 0px 0px; background-image:url("arrow-left-light.png"); background-size:80% auto; background-repeat:no-repeat; background-position:left } .flickerplate .arrow-navigation.right { right:10px } .flickerplate .arrow-navigation.right .arrow { opacity:0.3; margin:0px 0px 0px 0px; background-image:url("arrow-right-light.png"); background-size:80% auto; background-repeat:no-repeat; background-position:right } }