HTML slider to Wordpress theme - html

Question

Can somebody kindly tell me how to implement and HTML slider in a WordPress theme ? The following are the HTML markups:
<div class="slider">
<div class="camera_wrap">
<div data-src="img/slide-1.jpg">
<div class="camera_caption fadeIn">
<strong>FIRST-RATE TATTOO<br> STUDIO SERVING</strong>
<span>THE MIAMI AREA AND BEYOND.</span>
</div>
</div>
<div data-src="img/slide-2.jpg">
<div class="camera_caption fadeIn">
<strong>the best</strong>
<span>services & prices</span>
</div>
</div>
<div data-src="img/slide-3.jpg">
<div class="camera_caption fadeIn">
<strong>modern</strong>
<span>art technologies</span>
</div>
</div>
</div>
</div>
and
<
div class="list_carousel responsive clearfix">
<ul id="foo">
<li>
<div>
<figure class="img-polaroid"><img alt="" src="img/page1-img5.jpg"></figure>
<div class="caption">
<a class="lead" href="#">Quisque et diam ipsu.</a><br>
<time class="time" datetime="2013-04-24">April 24th, 2013</time>
Mes cuml dia sed in lacus ut eniascet etor ingerto aliiqt es sitet amet eismod ictor ut ligulate ameti dapibus ticdu nt mtsent lusto dolor ltisim comme.
</div>
</div>
</li>
<li>
<div>
<figure class="img-polaroid"><img alt="" src="img/page1-img6.jpg"></figure>
<div class="caption">
<a class="lead" href="#">Phasellus a libero ut.</a><br>
<time class="time" datetime="2013-04-24">April 24th, 2013</time>
Mes cuml dia sed in lacus ut eniascet etor ingerto aliiqt es sitet amet eismod ictor ut ligulate ameti dapibus ticdu nt mtsent lusto dolor ltisim comme.
</div>
</div>
</li>
<li>
<div>
<figure class="img-polaroid"><img alt="" src="img/page1-img5.jpg"></figure>
<div class="caption">
<a class="lead" href="#">Quisque et diam ipsu.</a><br>
<time class="time" datetime="2013-04-24">April 24th, 2013</time>
Mes cuml dia sed in lacus ut eniascet etor ingerto aliiqt es sitet amet eismod ictor ut ligulate ameti dapibus ticdu nt mtsent lusto dolor ltisim comme.
</div>
</div>
</li>
<li>
<div>
<figure class="img-polaroid"><img alt="" src="img/page1-img6.jpg"></figure>
<div class="caption">
<a class="lead" href="#">Phasellus a libero ut.</a><br>
<time class="time" datetime="2013-04-24">April 24th, 2013</time>
Mes cuml dia sed in lacus ut eniascet etor ingerto aliiqt es sitet amet eismod ictor ut ligulate ameti dapibus ticdu nt mtsent lusto dolor ltisim comme.
</div>
</div>
</li>
</ul>
<a id="prev" class="prev" href="#"></a>
<a id="next" class="next" href="#"></a>
</div>
I need to implement these sliders into a WordPress theme. Kindly help!
Regards
Debashis

Answer 1

There are several ways to do this, but I'll only show two:
You can add your html, css etc. to where ever you want it to show. For example you can create a page template that's only for the home page and then set this page as the front page in Wordpress backend.
Or you can create a page template that only shows this slider there. Find out more about page templates here http://codex.wordpress.org/Page_Templates
Like any slider, you will need to include the js or css files to the site. So add your css and js files in the header.php or footer.php files for your theme.
You can install this plugin http://wordpress.org/plugins/advanced-custom-fields/ and create a custom field with the above content. And then add the php snippet to your page template.
But like in the above, you still need to link your js and css files in the header.php or footer.php files of your theme!
But why dont you skip all this hard work, and just use a slider plugin like this one http://wordpress.org/plugins/simple-slider-ssp/
It might not have the same features, but it's a lot more simple!