Jump to content

Left not Center!

YourMateAussie

By YourMateAussie
in JavaScript

 Share

Recommended Posts

YourMateAussie Newbie

YourMateAussie

Posted
Posted 
Can some one more knowledgeable than I point me in the right direction here please? 
What must I need to adjust in this script below so that the image slider sits on the "left" 
of the page and not in the center? Thank you in advance. p.s I am only learning. 








<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"  type="text/javascript"></script><script  language="javascript">'use strict';$(function() {var width = 401; var  animationSpeed = 1400; var pause = 5000; var currentSlide = 1;var  $sdr1034 = $('#sdr1034'); var $slideContainer = $('.sld', $sdr1034); var  $sld = $('.slide', $sdr1034); var interval; function startsdr1034() {  interval = setInterval(function() {  $slideContainer.animate({'margin-left': '-='+width}, animationSpeed,  function() {if (++currentSlide === $sld.length) {currentSlide = 1;  $slideContainer.css('margin-left', 0); }});}, pause);} function  pausesdr1034()  {clearInterval(interval);}$slideContainer.on('mouseenter',  pausesdr1034).on('mouseleave',  startsdr1034);startsdr1034();});</script><div style="width:  401px; margin: 0 auto;"><div style="position: relative; width:  401px; "><style type="text/css">#gpoy {position: absolute;  right:-126px; top:2px; padding: 6px 0px 3px; z-index:99; opacity: 0.9;  transition: 1s;  line-height: 12px;}.repper {width: 405px; margin: 0  auto; position: relative; overflow: hidden; border-radius: 15px;  box-shadow: 7px 7px 9px #888888 ;}.repper:hover #gpoy {transition: 2s;  right:17px; }</style><div class="repper"><div  id="gpoy"><A style="font-weight: normal;  text-shadow: 1px 1px  #555555; color: #FFFFFF; text-decoration:none; font-size: 6pt;  line-height:10px; font-family: arial;"  HREF="http://www.123-slideshow.com" TARGET="_blank"> free slider  creation</A></div><style type="text/css">#sdr1034  {width: 401px; height: 300px; border: 2px solid #FFFFFF; border-radius:  15px; overflow: hidden; position: relative; cursor: pointer; }#sdr1034  .sld {width: 11629px; height: 300px;  display: block; margin: 0;  padding: 0;}#sdr1034 .slide {width: 401px; height: 300px; float: left;  list-style-type: none;}.DOT180802 {position: absolute; max-width: 401px;  margin: 0px;}.c124595  {position: absolute; bottom: 0px; width:100%;   padding: 10px; background-color: rgba(0, 0, 0, 0.5); color: #FFFFFF;  font-size:12pt; font-family:Tahoma; text-align:center; line-height:24px;  z-index:33; -webkit-box-sizing: border-box; -moz-box-sizing:  border-box; box-sizing: border-box;}</style>

<div id="sdr1034">
<ul class="sld">

<li class="slide slide1">
 <figure class="DOT180802">
  <IMG SRC="https://i.imgsafe.org/2c/2cda90eee5.jpeg">
 <figcaption class="c124595">
Discounted price $5.00!
</figcaption> 
 </figure>
 </li>

<li class="slide slide2">
 <figure class="DOT180802">
  <IMG SRC="https://i.imgsafe.org/2c/2cda58175d.jpeg">
 <figcaption class="c124595">
Discounted price $5.00!
</figcaption> 
 </figure>
 </li>

<li class="slide slide3">
 <figure class="DOT180802">
  <IMG SRC="https://i.imgsafe.org/2c/2cda1500f5.jpeg">
 <figcaption class="c124595">
Discounted price $5.00!
</figcaption> 
 </figure>
 </li>

<li class="slide slide4">
 <figure class="DOT180802">
  <IMG SRC="https://i.imgsafe.org/2c/2cd95345ce.jpeg">
 <figcaption class="c124595">
Discounted price $5.00!
</figcaption> 
 </figure>
 </li>

<li class="slide slide5">
 <figure class="DOT180802">
  <IMG SRC="https://i.imgsafe.org/2c/2cd9141de5.jpeg">
 <figcaption class="c124595">
Discounted price $5.00!
</figcaption> 
 </figure>
 </li>

<li class="slide slide6">
 <figure class="DOT180802">
  <IMG SRC="https://i.imgsafe.org/2c/2cd8d7d1dd.jpeg">
 <figcaption class="c124595">
Discounted price $5.00!
</figcaption> 
 </figure>
 </li>

<li class="slide slide7">
 <figure class="DOT180802">
  <IMG SRC="https://i.imgsafe.org/2c/2cd8967f30.jpeg">
 <figcaption class="c124595">
Discounted price $5.00!
</figcaption> 
 </figure>
 </li>

<li class="slide slide8">
 <figure class="DOT180802">
  <IMG SRC="https://i.imgsafe.org/2c/2cd848b1d5.jpeg">
 <figcaption class="c124595">
Discounted price $5.00!
</figcaption> 
 </figure>
 </li>

<li class="slide slide9">
 <figure class="DOT180802">
  <IMG SRC="https://i.imgsafe.org/2c/2cbca6861b.jpeg">
 <figcaption class="c124595">
Discounted price $5.00!
</figcaption> 
 </figure>
 </li>

<li class="slide slide10">
 <figure class="DOT180802">
  <IMG SRC="https://i.imgsafe.org/2c/2cbc9712c3.jpeg">
 <figcaption class="c124595">
Discounted price $5.00!
</figcaption> 
 </figure>
 </li>

<li class="slide slide11">
 <figure class="DOT180802">
  <IMG SRC="https://i.imgsafe.org/2c/2cbc73c17c.jpeg">
 <figcaption class="c124595">
Discounted price $5.00!
</figcaption> 
 </figure>
 </li>

<li class="slide slide12">
 <figure class="DOT180802">
  <IMG SRC="https://i.imgsafe.org/2c/2cbc6317ce.jpeg">
 <figcaption class="c124595">
Discounted price $5.00!
</figcaption> 
 </figure>
 </li>

<li class="slide slide13">
 <figure class="DOT180802">
  <IMG SRC="https://i.imgsafe.org/2c/2cbc25ba5f.jpeg">
 <figcaption class="c124595">
Discounted price $5.00!
</figcaption> 
 </figure>
 </li>

<li class="slide slide14">
 <figure class="DOT180802">
  <IMG SRC="https://i.imgsafe.org/2c/2cbc0c556f.jpeg">
 <figcaption class="c124595">
Discounted price $5.00!
</figcaption> 
 </figure>
 </li>

<li class="slide slide15">
 <figure class="DOT180802">
  <IMG SRC="https://i.imgsafe.org/2c/2cbad8ad4a.jpeg">
 <figcaption class="c124595">
Discounted price $5.00!
</figcaption> 
 </figure>
 </li>

<li class="slide slide16">
 <figure class="DOT180802">
  <IMG SRC="https://i.imgsafe.org/2c/2cbaa04dd5.jpeg">
 <figcaption class="c124595">
Discounted price $5.00!
</figcaption> 
 </figure>
 </li>

<li class="slide slide17">
 <figure class="DOT180802">
  <IMG SRC="https://i.imgsafe.org/2c/2cba873eaa.jpeg">
 <figcaption class="c124595">
Discounted price $5.00!
</figcaption> 
 </figure>
 </li>

<li class="slide slide18">
 <figure class="DOT180802">
  <IMG SRC="https://i.imgsafe.org/2c/2cba77d13b.jpeg">
 <figcaption class="c124595">
Discounted price $5.00!
</figcaption> 
 </figure>
 </li>

<li class="slide slide19">
 <figure class="DOT180802">
  <IMG SRC="https://i.imgsafe.org/2c/2cb8d5d2ac.jpeg">
 <figcaption class="c124595">
Discounted price $5.00!
</figcaption> 
 </figure>
 </li>

<li class="slide slide20">
 <figure class="DOT180802">
  <IMG SRC="https://i.imgsafe.org/2c/2cb8c59291.jpeg">
 <figcaption class="c124595">
Discounted price $5.00!
</figcaption> 
 </figure>
 </li>

<li class="slide slide21">
 <figure class="DOT180802">
  <IMG SRC="https://i.imgsafe.org/2c/2cb8612c2d.jpeg">
 <figcaption class="c124595">
Discounted price $5.00!
</figcaption> 
 </figure>
 </li>

<li class="slide slide22">
 <figure class="DOT180802">
  <IMG SRC="https://i.imgsafe.org/2c/2cb857af29.jpeg">
 <figcaption class="c124595">
Discounted price $5.00!
</figcaption> 
 </figure>
 </li>

<li class="slide slide23">
 <figure class="DOT180802">
  <IMG SRC="https://i.imgsafe.org/2c/2cb8271816.png">
 <figcaption class="c124595">
Discounted price $5.00!
</figcaption> 
 </figure>
 </li>

<li class="slide slide24">
 <figure class="DOT180802">
  <IMG SRC="https://i.imgsafe.org/2c/2cb83d4911.jpeg">
 <figcaption class="c124595">
Discounted price $5.00!
</figcaption> 
 </figure>
 </li>

<li class="slide slide25">
 <figure class="DOT180802">
  <IMG SRC="https://i.imgsafe.org/2c/2cb82b4a33.jpeg">
 <figcaption class="c124595">
Discounted price $5.00!
</figcaption> 
 </figure>
 </li>

<li class="slide slide26">
 <figure class="DOT180802">
  <IMG SRC="https://i.imgsafe.org/2c/2cb8083d12.png">
 <figcaption class="c124595">
Discounted price $5.00!
</figcaption> 
 </figure>
 </li>

<li class="slide slide27">
 <figure class="DOT180802">
  <IMG SRC="https://i.imgsafe.org/2c/2cb73b6de7.jpeg">
 <figcaption class="c124595">
Discounted price $5.00!
</figcaption> 
 </figure>
 </li>

<li class="slide slide28">
 <figure class="DOT180802">
  <IMG SRC="https://i.imgsafe.org/2d/2daf92390b.jpeg">
 <figcaption class="c124595">
Discounted price $5.00!
</figcaption> 
 </figure>
 </li>

</ul></div></div></div>
</div>

</body>
</html>
Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

It's pretty hard to tell when you have all of that code on one line, but it looks like you put everything in the head and don't actually have a body for the page.  If you reformatted that code so it's readable I'm sure it would be obvious which CSS rules need to be changed.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...