0

Im quite beginner in CSS and JS, however i need to implement a working "slide show image", so i tried to google it, and finally i get a working script with complete CSS.

But this is what i got if i insert a shorter image :

enter image description here

I have tried to modify it by my self, but the control/button will be disappear everytime i tried to change its height.

I think i have 3 choices now :

  • Delete the margin-botton
  • Centering the image
  • Do both of them

Which one is the easiest? and how? Thanks :D

This is the complete CSS code :

#slides {
  display: none
}

#slides .slidesjs-navigation {
  margin-top:5px;
}

a.slidesjs-next,
a.slidesjs-previous,
a.slidesjs-play,
a.slidesjs-stop {
  background-image: url(../image/btns-next-prev.png);
  background-repeat: no-repeat;
  display:block;
  width:12px;
  height:18px;
  overflow: hidden;
  text-indent: -9999px;
  float: left;
  margin-right:5px;
}

a.slidesjs-next {
  margin-right:10px;
  background-position: -12px 0;
}

a:hover.slidesjs-next {
  background-position: -12px -18px;
}

a.slidesjs-previous {
  background-position: 0 0;
}

a:hover.slidesjs-previous {
  background-position: 0 -18px;
}

a.slidesjs-play {
  width:15px;
  background-position: -25px 0;
}

a:hover.slidesjs-play {
  background-position: -25px -18px;
}

a.slidesjs-stop {
  width:18px;
  background-position: -41px 0;
}

a:hover.slidesjs-stop {
  background-position: -41px -18px;
}

.slidesjs-pagination {
  margin: 7px 0 0;
  float: right;
  list-style: none;
}

.slidesjs-pagination li {
  float: left;
  margin: 0 1px;
}

.slidesjs-pagination li a {
  display: block;
  width: 13px;
  height: 0;
  padding-top: 13px;
  background-image: url(../image/pagination.png);
  background-position: 0 0;
  float: left;
  overflow: hidden;
}

.slidesjs-pagination li a.active,
.slidesjs-pagination li a:hover.active {
  background-position: 0 -13px
}

.slidesjs-pagination li a:hover {
  background-position: 0 -26px
}

#slides a:link,
#slides a:visited {
  color: #333
}

#slides a:hover,
#slides a:active {
  color: #9e2020
}

.navbar {
  overflow: hidden
}


#slides {
  display: none
}

.container {
  margin: 0 auto;
  width: 600px;
}
Blaze Tama
  • 10,828
  • 13
  • 69
  • 129
  • http://stackoverflow.com/questions/6490252/vertically-centering-a-div-inside-another-div – StephenWidom May 13 '13 at 03:50
  • I believe I've used this free image slider component recently too... just a tip there is a good one on CodeCanyon called RoyalSlider, developer is just asking $14 per use which is fairly reasonable given it works well with YouTube, Vimeo, acts responsively without any hassle, touch-enabled, etc, generally so far I have no complaints. Not trying to sell someone else's product but for the price it's a pretty nice little rig. Also comment above seems like a good solution. – shaunhusain May 13 '13 at 03:52
  • 1
    @shaunhusain Thanks for your tips. However, i tried to learn the JS and CSS, so it think its best to manually code it (or dont use any plugin) – Blaze Tama May 13 '13 at 03:54
  • @StephenWidom Thanks for the link. Yes, i also think its about centering in nested div, however i still cant code it (still trying now) – Blaze Tama May 13 '13 at 03:54
  • I can't knock that at all, just throwing it out there as I'm doing web projects for small clients and have found it to work without hassle to just get it done quick... but always better to learn the details. – shaunhusain May 13 '13 at 03:54
  • We'd need to see your HTML (and JS also probably) to really help you out. Can you post it? – morespace54 Jul 03 '15 at 16:01

0 Answers0