TH-Photoshop-Foundations-Layer-Panel 2

TH-Photoshop-foundations-Intro-To-Layers 1

Slideshow Made With CSS, HTML, Java Script

HTML

_________________________________________________________________________________

<section class="demo">

  <button class="next">Next</button>

  <button class="prev">Previous</button>

  <div class="container">

    <div style="display: inline-block;">

      <img src="http://placeimg.com/400/200/people"/>

    </div>

    <div>

     <img src="http://placeimg.com/400/200/any"/>

    </div>

    <div>

      <img src="http://placeimg.com/400/200/nature"/>

    </div>

    <div>

      <img src="http://placeimg.com/400/200/architecture"/>

    </div>

    <div>

      <img src="http://placeimg.com/400/200/animals"/>

    </div>

    <div>

      <img src="http://placeimg.com/400/200/people"/>

    </div>

    <div>

      <img src="http://placeimg.com/400/200/tech"/>

    </div>

  </div>

</section>

<div class="explanation">

  Building a slideshow like pattern that can accurately cycle through a number of unknown divs, forwards and backwards. Trying to use as little code as possible. Leave a comment if you see a way to do it better!

</div>

_________________________________________________________________________________

CSS

_________________________________________________________________________________

.container {

  max-width: 400px;

  background-color: black;

  margin: 0 auto;

  text-align: center;

  position: relative;

}

.container div {

  background-color: white;

  width: 100%;

  display: inline-block;

  display: none;

}

.container img {

  width: 100%;

  height: auto;

}

button {

  position: absolute;

}

.next {

  right: 5px;

}

.prev {

  left: 5px;

}

_________________________________________________________________________________

Java Script

_________________________________________________________________________________

var currentIndex = 0,

  items = $('.container div'),

  itemAmt = items.length;

function cycleItems() {

  var item = $('.container div').eq(currentIndex);

  items.hide();

  item.css('display','inline-block');

}

var autoSlide = setInterval(function() {

  currentIndex += 1;

  if (currentIndex > itemAmt - 1) {

    currentIndex = 0;

  }

  cycleItems();

}, 3000);

$('.next').click(function() {

  clearInterval(autoSlide);

  currentIndex += 1;

  if (currentIndex > itemAmt - 1) {

    currentIndex = 0;

  }

  cycleItems();

});

$('.prev').click(function() {

  clearInterval(autoSlide);

  currentIndex -= 1;

  if (currentIndex < 0) {

    currentIndex = itemAmt - 1;

  }

  cycleItems();

});

Photoshop 7 Tutorial Urdu Advanced Part 1 By Aslam Hindko

Java Script Tutorial In Urdu