Jump to content

YourMateAussie

Members
 View Profile  See their activity

  • Posts

    1

  • Joined

  • Last visited

 Content Type 

Posts posted by YourMateAussie

    Left not Center!

    in JavaScript

    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>
×
×
  • Create New...