I have tried a lot to make it 100% width slider. But it gets chipped from the right side as you can see from my blog. http://myideakart.blogspot.in/
This is the code that I pasted on my Html/javaScript widget
<style>
/*crawlist.net slider CSS*/
.bx-wrapper {width:100%}
#slider {
list-style:none;
padding:0px;
}
.slider-container {
background:#fff;
width:100%;
height:120px;
z-index: 126;
padding:0px 0px 43px 0px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
overflow:hidden;
margin:0px 0px 45px 0px;
}
.newcon { width:100%; margin:0px 0px 43px 0px; overflow:hidden}
#slider img {
width:200px;
height:125px;
margin:0px;
display:inline-block;
border: 1px solid #f5f5f5;
}
#slider li {
width:210px
}
/*crawlist.net slider CSS*/
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/35622252191/slider.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slider').bxSlider({
ticker: true,
tickerSpeed: 5000,
tickerHover: true
});
});
</script>
<div class="newcon">
<!-- crawlist.net slider starts -->
<div class="slider-container">
<ul id="slider">
<li><a href='http://myideakart.blogspot.in/2016/08/importance-of-social-media-marketing_10.html' title="place hover text" target="_blank"><img src="http://www.typicalfinance.com/wp-content/uploads/2016/07/B2B-Marketing.jpg"/></a></li>
<li><a href='http://myideakart.blogspot.in/2016/08/mark-zuckerberg-celebrated-skip-app.html' title="place hover text" target="_blank"><img src="http://theideamarketing.com/WordPress/wp-content/uploads/2015/04/logo-idea-marketing3-300x214.png"/></a></li>
<li><a href='place link' title="place hover text" target="_blank"><img src="http://i-tul.com/wp-content/uploads/2014/07/SEO_Blog_Tips_On_Going_Viral.jpg"/></a></li>
<li><a href='place link' title="place hover text" target="_blank"><img src="http://btt.bloggertipstrick.netdna-cdn.com/wp-content/uploads/2015/04/blogger-on-page-seo-tips.png"/></a></li>
<li><a href='place link' title="place hover text" target="_blank"><img src="image link"/></a></li>
<li><a href='place link' title="place hover text" target="_blank"><img src="image link"/></a></li>
<li><a href='place link' title="place hover text" target="_blank"><img src="image link"/></a></li>
<li><a href='place link' title="place hover text" target="_blank"><img src="image link"/></a></li>
</ul>
</div><!-- crawlist.net slider ends --></div>
2
Answers
You have to add to .bx-window
or
So You have to make this code:
There are two problems that causes this, first one is what Maciej suggested, add
width: 100%
to both.bx-wrapper
and.bx-window
, but in your HTML markup, you have astyle="width:840px"
attribute set on both elements. The problem with this is that thestyle
attribute has higher priority than what’s written in your CSS file (so it overwrites what you write in your CSS file), so you either have to remove that markup, or move yourwidth: 100%
declarations to the elementsstyle
attribute.