html - adding content to the bx content slider -
i trying implement this simple content slider however, starting wonder whether or not content slider need align div centrally. apologies, posted question accidentally , wasnt specific enough, need align div centrally h1 text line above smaller h2 line of text below can help? can please show me? if not genuine content slider can show me how can create content slider? give thanks you.
my current code below.
my html code
<body> <ul class="bxslider"> <li style="background-image: url('http://bxslider.com/images/home_slides/hillside.jpg');"></li> <li style="background-image: url('http://bxslider.com/images/home_slides/houses.jpg');"></li> <li style="background-image: url('http://bxslider.com/images/home_slides/hillside.jpg');"></li> <li style="background-image: url('http://bxslider.com/images/home_slides/houses.jpg');"></li> </ul> </body> my css code
<style> .bx-wrapper { position: relative; left: 0px; top: 0px; padding: 0; *zoom: 1; } .bx-wrapper img { max-width: 100%; height: 100%; display: block; } /** theme ===================================*/ .bx-wrapper .bx-viewport { -moz-box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc; box-shadow: 0 0 5px #ccc; border: 5px solid #fff; left: -5px; background: #fff; /*fix other elements on page moving (on chrome)*/ -webkit-transform: translatez(0); -moz-transform: translatez(0); -ms-transform: translatez(0); -o-transform: translatez(0); transform: translatez(0); } .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto { position: absolute; bottom: -30px; width: 100%; } /* loader */ .bx-wrapper .bx-loading { min-height: 50px; background: url(images/bx_loader.gif) center center no-repeat #fff; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 2000; } /* pager */ .bx-wrapper .bx-pager { text-align: center; font-size: .85em; font-family: arial; font-weight: bold; color: #666; padding-top: 20px; } .bx-wrapper .bx-pager .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item { display: inline-block; *zoom: 1; *display: inline; } .bx-wrapper .bx-pager.bx-default-pager { background: #666; text-indent: -9999px; display: block; width: 10px; height: 10px; margin: 0 5px; outline: 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active { background: #000; } /* direction controls (next / prev) */ .bx-wrapper .bx-prev { left: 10px; background: url(images/controls.png) no-repeat 0 -32px; } .bx-wrapper .bx-next { right: 10px; background: url(images/controls.png) no-repeat -43px -32px; } .bx-wrapper .bx-prev:hover { background-position: 0 0; } .bx-wrapper .bx-next:hover { background-position: -43px 0; } .bx-wrapper .bx-controls-direction { position: absolute; top: 50%; margin-top: -16px; outline: 0; width: 32px; height: 32px; text-indent: -9999px; z-index: 9999; } .bx-wrapper .bx-controls-direction a.disabled { display: none; } /* auto controls (start / stop) */ .bx-wrapper .bx-controls-auto { text-align: center; } .bx-wrapper .bx-controls-auto .bx-start { display: block; text-indent: -9999px; width: 10px; height: 11px; outline: 0; background: url(images/controls.png) -86px -11px no-repeat; margin: 0 3px; } .bx-wrapper .bx-controls-auto .bx-start:hover, .bx-wrapper .bx-controls-auto .bx-start.active { background-position: -86px 0; } .bx-wrapper .bx-controls-auto .bx-stop { display: block; text-indent: -9999px; width: 9px; height: 11px; outline: 0; background: url(images/controls.png) -86px -44px no-repeat; margin: 0 3px; } .bx-wrapper .bx-controls-auto .bx-stop:hover, .bx-wrapper .bx-controls-auto .bx-stop.active { background-position: -86px -33px; } /* pager auto-controls hybrid layout */ .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { text-align: left; width: 80%; } .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto { right: 0; width: 35px; } /* image captions */ .bx-wrapper .bx-caption { position: absolute; bottom: 0; left: 0; background: #666\9; background: rgba(80, 80, 80, 0.75); width: 100%; } .bx-wrapper .bx-caption span { color: #fff; font-family: arial; display: block; font-size: .85em; padding: 10px; } *{ margin: 0px; padding: 0px; } body, html{ height: 100%; } .bx-viewport, .bx-wrapper{ position:relative; width:100%; height:100% !important; top:0; left:0; } .bxslider, .bxslider li{ height: 100% !important;; } .bxslider li{ background-repeat: no-repeat; background-position: top center; background-size: cover; } .bx-wrapper .bx-viewport{ border: none !important; }*{ margin: 0px; padding: 0px; } body, html{ height: 100%; } .bx-viewport, .bx-wrapper{ position:relative; width:100%; height:100% !important; top:0; left:0; } .bxslider, .bxslider li{ height: 100% !important;; } .bxslider li{ background-repeat: no-repeat; background-position: top center; background-size: cover; } .bx-wrapper .bx-viewport{ border: none !important; } </style>
you need set content within li that:
<ul class="bxslider"> <li>some text</li> <li>more text</li> <li><img src="http://bxslider.com/images/730_200/trees.jpg" title="happy trees" /></li> </ul> jsfiddle
update 1.
it doesn't matter content want display format add together proper styling , set li element.
here div centred headers - jsfiddle
html css slider bxslider
No comments:
Post a Comment