Image slider not in full size
3 posts Page 1 of 1
Image slider not in full size
I am testing following css in my site. But it does not appear in actual size and stay in the middle of the page.http://www.egtours.com/test.php
which item has to be modified ?
- Code: Select all
#ninja-slider {
width:100%;
background:#333;
padding: 30px 0;
margin:0 auto;
overflow:hidden;
box-sizing:border-box;
}
#ninja-slider.fullscreen {
background:black;
}
#ninja-slider .fs-icon {
top:9px;
right:5px;
width:59px;
height:25px;
background: rgba(0,0,0,0.3);
z-index:2;
color:white;
text-align:center;
font:bold 11px/26px arial;
border:1px solid rgba(255,255,255,0.3);
border-radius:2px;
opacity:0;
-webkit-transition:opacity 0.8s;
transition:opacity 0.8s;
}
#ninja-slider .slider-inner:hover .fs-icon,
#ninja-slider.fullscreen .fs-icon {
opacity: 1;
}
#ninja-slider .fs-icon::before {
content:"EXPAND";
display:block;
}
#ninja-slider.fullscreen .fs-icon::before {
content:"CLOSE";
}
#ninja-slider div.slider-inner {
margin:0 auto;/*center-aligned */
font-size:0px;
position:relative;
box-sizing:border-box;
}
#ninja-slider.fullscreen .slider-inner {
width:95%;
max-width:900px;
}
#ninja-slider ul {
/*overflow:hidden;*/
position:relative;
list-style:none;
padding:0;
box-sizing:border-box;
}
#ninja-slider li {
width:100%;
height:100%;
top:0;
left:0;
position: absolute;
font-size:12px;
list-style:none;
margin:0;
padding:0;
opacity:0;
overflow:hidden;
box-sizing:border-box;
}
#ninja-slider li.ns-show {
opacity:1;
}
/* --------- slider image ------- */
#ninja-slider .ns-img {
background-color:rgba(0,0,0,0.3);
background-size:contain;/*Note: If transitionType is zoom, it will be overridden to cover.*/
/*decorate border*/
box-shadow: 0 1px 5px rgba(0,0,0,.8),inset 0 0 2px rgba(255,255,255,.4);
border-radius:4px;
cursor:default;
display:block;
position: absolute;
width:100%;
height:100%;
background-repeat:no-repeat;
background-position:center center;
}
/*---------- Captions -------------------*/
#ninja-slider .caption {
padding:20px 40px;
margin:auto;
left:0;right:0;
top:auto;bottom:8%;
width:auto;
text-align:left;
font-family:sans-serif;
font-size:2.2em;
color:#fff;
background:rgba(0,0,0,0.6);
border:1px solid rgba(255,255,255,0.4);
border-radius:4px;
position:absolute;
box-sizing:border-box;
opacity:0;
-webkit-transition:opacity 1s ease-in;
transition:opacity 1s ease-in;
}
#ninja-slider li[class*='-s'] .caption {
opacity:1;
}
/* ---------If there are videos ------- */
#ninja-slider .video, .video-playbutton-layer
{
top:0; left:0; border:0;
width: 100%;height: 100%;
text-align: center;
background: black;
position: absolute;
}
/* And if you have added the HTML: <div class="video-playbutton-layer"></div> */
.video-playbutton-layer {
background: transparent url(video-btn.png) no-repeat center center;
}
/* And if you have YouTube or Vimeo */
#ninja-slider div.stopVideoIcon
{
position:absolute;
width:30px;height:30px;
top:0;right:0px;
margin:0 0 6px 6px;
background:rgba(0,0,0,0.7);
border-bottom-left-radius:4px;
cursor:pointer;
}
#ninja-slider div.stopVideoIcon::before {
content:"+";
color:white;
font:bold 30px/30px arial;
-webkit-transform:rotate(45deg);
transform: rotate(45deg);
display:block;
}
/* ---------Arrow buttons ------- */
/* The arrow button id should be: slider id + ("-prev", "-next", and "-pause-play") */
#ninja-slider-pause-play { display:none;}
#ninja-slider-prev, #ninja-slider-next
{
position: absolute;
display:inline-block;
width:60px;
height:100px;
line-height:100px;
top: 50%;
margin:0;
margin-top:-65px;/*pager's height should also be counted*/
background-color:none;
background-color:#ccc\9;/*IE8 hack*/
backface-visibility:hidden;
color:white;
overflow:hidden;
white-space:nowrap;
-webkit-user-select: none;
user-select:none;
border-radius:3px;
z-index:10;
opacity:0.2;
cursor:pointer;
font-family:sans-serif;
font-size:11px;
cursor:pointer;
-webkit-transition:all 0.7s;
transition:all 0.7s;
-webkit-transform:scale(1,1.3);
transform:scale(1,1.3);
/*border:1px solid white;*/
}
#ninja-slider-prev:hover, #ninja-slider-next:hover {
opacity:1;
/*background-color:rgba(0,0,0,0.4);*/
}
#ninja-slider-prev {
left: -30px;
}
#ninja-slider-next {
right: -30px;
}
/*pagination within the prev/next buttons*/
#ninja-slider-prev div {opacity:0;margin-left:30px;transition:opacity 0.7s;}
#ninja-slider-next div {opacity:0;float:right;margin-right:30px;transition:opacity 0.7s;}
#ninja-slider-prev:hover div, #ninja-slider-next:hover div{opacity:1;}
/* arrows */
#ninja-slider-prev::before, #ninja-slider-next::before {
position: absolute;
top: 25px;
content: "";
display: inline-block;
width: 45px;
height: 45px;
border-left: 3px solid #ccc;
border-top: 3px solid #ccc;
}
#ninja-slider-prev::before {
-ms-transform:rotate(-45deg);/*IE 9*/
-webkit-transform:rotate(-45deg);
transform: rotate(-45deg);
backface-visibility:hidden;
right:-16px;
}
#ninja-slider-next::before {
-ms-transform:rotate(135deg);/*IE 9*/
-webkit-transform:rotate(135deg);
transform: rotate(135deg);
backface-visibility:hidden;
left:-16px;
}
/*------ pager(nav bullets) ------*/
/* The pager id should be: slider id + "-pager" */
/* #ninja-slider-pager { display:none;}*/
#ninja-slider-pager
{
padding-top:30px; /* set the distance away from the slider */
margin:0 auto; /* center align */
text-align:center;
display:table;
font-size:0;
}
#ninja-slider-pager a
{
display:inline-block;
width: 10px;
height: 10px;
background-color: #888;
font-size:0; /* Non-zero will show the index num */
margin:2px 6px;
cursor:pointer;
border-radius:10px;
box-shadow:inset 0 1px 3px #666666;
}
#ninja-slider-pager a:hover
{
opacity:0.6;
}
#ninja-slider-pager a.active
{
background-color:#ccc;
box-shadow:0 1px 1px rgba(0,0,0,.5);
}
#ninja-slider-pager, #ninja-slider-prev, #ninja-slider-next, #ninja-slider-pause-play
{
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
/*------ Responsive settings ------*/
@media only screen and (max-width:950px){
#ninja-slider-prev {
left: -12px;
}
#ninja-slider-next {
right: -12px;
}
}
@media only screen and (max-width:600px){
#ninja-slider-prev, #ninja-slider-next, #ninja-slider-pager {
display:none;
}
}
Re: Image slider not in full size
Hi,Try this new style:
#content-parent {
width: 100%;
}
Thanks
--
Website Designer with 7 years experience as WordPress Developer. Affordable, Professional and Experienced. 100% Satisfaction. 24/7 Available.
Website Designer with 7 years experience as WordPress Developer. Affordable, Professional and Experienced. 100% Satisfaction. 24/7 Available.
Re: Image slider not in full size
johnmacd wrote:Hi,
Try this new style:
#content-parent {
width: 100%;
}
Thanks
Worked for me! Thank you very much!
--
fixa
Page 1 of 1