I have added a Jquery slider (called SudoSlider) to my website, with 'previous' and 'next' buttons that allow users to advance to the next slide, or go back one. I would, however, like to make it so that the slides change automatically.
I have come across questions that are similar to this, but my Javascript is rather limited and so I'm unable to use the codes given to other users.
If anybody can help me achieve this I would be very grateful.
Please see this JSFiddle here for the codes used.
Also, the slider can be seen in action here if the JSFiddle is of no use.
Thanks very much in advance!
Here is the working fiddle: http://jsfiddle.net/surendraVsingh/VN7F8/1/
I just changed the sequence of loading javascript. Below is the complete HTML with javascript included & include external css u have.
HTML Changes:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"/></script>
<script type="text/javascript" src="http://www.pinknoise-systems.co.uk/userfiles/jquery/slider/js/jquery.sudoSlider.min.js"/></script>
<script type="text/javascript">
$(document).ready(function(){
var sudoSlider = $("#slider").sudoSlider();
});
</script>
</head>
<body>
<div id="container">
<div style="position:relative;">
<div id="slider">
<ul>
<li>
<div style="margin:0 auto;text-align:center;height:300px;">
<img src="http://www.pinknoise-systems.co.uk/userfiles/images/final_slide_6.png" />
</div>
</li>
<li>
<div style="margin:0 auto;width:620px;height:300px;background:url('http://www.pinknoise-systems.co.uk/userfiles/images/final_slide_5.png');">
<div class="product_row_1">
<div class="one">
Sennheiser SKP 300 G3
<div class="p-image"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/skp300.jpg" /></div>
<div class="p-content">
<img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/4_stars.png" />
<p class="slide_product_price">£296.00</p>
<p class="slide_product_price2">EX VAT #20%</p>
</div>
</div>
<div class="two margin-3">
Fostex PM8.4.1
<div class="p-image"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/pm841.jpg" /></div>
<div class="p-content">
<img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/4_stars.png" />
<p class="slide_product_price">£412.50</p>
<p class="slide_product_price2">EX VAT #20%</p>
</div>
</div>
<div class="three margin-3">
Delkin Wingman
<div class="p-image"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/wingman.jpg" /></div>
<div class="p-content">
<div class="4stars"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/4_stars.png" /></div>
<p class="slide_product_price">£179.19</p>
<p class="slide_product_price2">EX VAT #20%</p>
</div>
</div>
</div>
<div class="product_row_2">
<div class="one">
D|Focus Street Runner Kit
<div class="p-image"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/streetrunnerbundle.jpg" /></div>
<div class="p-content">
<div class="4stars"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/4_stars.png" /></div>
<p class="slide_product_price">£332.50</p>
<p class="slide_product_price2">EX VAT #20%</p>
</div>
</div>
<div class="two margin-3">
D|Focus Field Runner Kit
<div class="p-image"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/fieldrunnerkit.jpg" /></div>
<div class="p-content">
<div class="4stars"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/4_stars.png" /></div>
<p class="slide_product_price">£382.50</p>
<p class="slide_product_price2">EX VAT #20%</p>
</div>
</div>
<div class="three margin-3">
D|Focus Austin Rig Bundle
<div class="p-image"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/austinrigbundle.jpg" /></div>
<div class="p-content">
<img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/4_stars.png" />
<p class="slide_product_price">£499.17</p>
<p class="slide_product_price2">EX VAT #20%</p>
</div>
</div>
</div>
</div>
</li>
<li>
<div style="margin:0 auto;text-align:center;">
<img src="http://www.pinknoise-systems.co.uk/userfiles/images/final_slide_3.jpg" />
</div>
</li>
<li>
<div style="margin:0 auto;text-align:center;">
<img src="http://www.pinknoise-systems.co.uk/userfiles/images/final_slide_4.jpg" />
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Try this, it sets the slider to automatically change.
$(document).ready(function(){
var sudoSlider = $("#slider").sudoSlider({fade: true,auto:true});
});
here is the working link
Related
How can I move/copy the price and put it inside the <div class="info"> using jQuery?
I'm using this code but it gives me an answer of "102030".
jQuery(document).ready(function($) {
$(document).ready(function() {
$(".items .price").appendTo(".info");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="items">
<span class="price">10</span>
<img src="/url" alt="" />
<div class="info">
</div>
</div>
<div class="items">
<span class="price">20</span>
<img src="/url" alt="" />
<div class="info">
</div>
</div>
<div class="items">
<span class="price">30</span>
<img src="/url" alt="" />
<div class="info">
</div>
</div>
</div>
You can use .each loop to iterate through your items div and use .find('.price').text() to get value of price and add that value inside info div using .text()
Demo Code :
$(".items").each(function() {
//find price value and assign it to info div
$(this).find(".info").text($(this).find(".price").text())
//$(this).find(".price").remove() //if want to remove price div
})
.info {
color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="items">
<span class="price">10</span>
<img src="/url" alt="" />
<div class="info">
</div>
</div>
<div class="items">
<span class="price">20</span>
<img src="/url" alt="" />
<div class="info">
</div>
</div>
<div class="items">
<span class="price">30</span>
<img src="/url" alt="" />
<div class="info">
</div>
</div>
Find Every element's price and .append() it into .info by using .each().
$(document).ready(function(){
$(".items").each(function() {
$(this).find(".info").append($(this).find(".price"))
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="items">
<span class="price">10</span>
<img src="/url" alt="" />
<div class="info">
</div>
</div>
<div class="items">
<span class="price">20</span>
<img src="/url" alt="" />
<div class="info">
</div>
</div>
<div class="items">
<span class="price">30</span>
<img src="/url" alt="" />
<div class="info">
</div>
</div>
</div>
You can move/copy price to another div or tag using javacript/jquery using below example
$(document).ready(function () {
$(".items").each(function(){
var price = $(this).find('.price').text();
$(this).find('.info').text(price);
});
use this I hope it will work
I have a list of divs that contain a string in h3 format. Upon clicking these divs (they are all the same class) a screen is displayed (part of the same html doc) containing some sliders for user input.
Is there a way to make it so that when the screen is displayed it contains the string of whatever div was clicked? In other words, if the user taps/clicks the "Push Ups" card, I would like the div "#info" to update to shoe "push Ups", if the user selects "Iquats" I would like "#info" to show "Squats" ec.
I can't think of a way to do this without using JSON or some sort of server magic. CODE!
HTML:
<!--HEADER-->
<div class="header">
<div id="info">
<p>Select Exercise</p> <!--THIS IS WHERE I WOULD LIKE THE STRING TO UPDATE-->
</div>
</div>
<!--EXERCISE LIST-->
<div id="exerciseContainer">
<div class="exerciseL exercise">
<h3>Push Ups</h3>
</div>
<div class="exerciseR exercise">
<h3>Dips</h3>
</div>
<div class="exerciseL exercise">
<h3>Burpees</h3>
</div>
<div class="exerciseR exercise">
<h3>Plank</h3>
</div>
<div class="exerciseL exercise">
<h3>Sit Ups</h3>
</div>
<div class="exerciseR exercise">
<h3>Leg Ups</h3>
</div>
<div class="exerciseL exercise">
<h3>Russian Twists</h3>
</div>
<div class="exerciseR exercise">
<h3>Back Raises</h3>
</div>
</div>
<!--SPECIFY TIMING FOR EXERCISES-->
<div id="specifier">
<div id="containSliders">
<!--Exercise time allocator-->
<h1></h1> <!--I WOULD LIKE THIS TO UPDATE ALSO-->
<div id="containSliderOne">
<p>Time:</p>
<output id="timeValue">60 sec.</output>
<input type="range" id="determineTime" step="10" value="60" min="0" max="180" />
</div>
<!--Exercise time allocator-->
<div id="containSliderTwo">
<p>Rest Time:</p>
<output id="restValue">10 sec.</output>
<input type="range" id="determineRest" step="10" value="10" min="0" max="180" />
</div>
<!--Add rest button-->
<div id="addBreak"><p>Add Break</p></div>
<!--Back Button-->
<div id="cancel">
<a id="exerciseCancel" href="exercises.html">
<img src="images/backButtonUp.png" width="100" alt=""/>
<img src="images/backButtonDown.png" width="85" alt=""/>
</a>
</div>
<!--Confirm Button-->
<div id="confirm">
<a id="exerciseConfirm" href="routineOverview.html">
<img src="images/whiteTickUp.png" width="95" alt=""/>
<img src="images/whiteTickDown.png" width="80" alt=""/>
</a>
</div>
</div>
</div>
JavaScript (jQuery)
$(".exercise").click(function()
{
$("#specifier").css("display", "block");
$(".backButton").css("display", "none");
});
Thanks for any help and ideas given!
If I understand you correctly, you can get the clicked element text by using $(this).text() inside the click event.
$(function() {
$('.exercise').click(function() {
$('#info').text($(this).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!--HEADER-->
<div class="header">
<div id="info">
<p>Select Exercise</p>
<!--THIS IS WHERE I WOULD LIKE THE STRING TO UPDATE-->
</div>
</div>
<!--EXERCISE LIST-->
<div id="exerciseContainer">
<div class="exerciseL exercise">
<h3>Push Ups</h3>
</div>
<div class="exerciseR exercise">
<h3>Dips</h3>
</div>
<div class="exerciseL exercise">
<h3>Burpees</h3>
</div>
<div class="exerciseR exercise">
<h3>Plank</h3>
</div>
<div class="exerciseL exercise">
<h3>Sit Ups</h3>
</div>
<div class="exerciseR exercise">
<h3>Leg Ups</h3>
</div>
<div class="exerciseL exercise">
<h3>Russian Twists</h3>
</div>
<div class="exerciseR exercise">
<h3>Back Raises</h3>
</div>
</div>
<!--SPECIFY TIMING FOR EXERCISES-->
<div id="specifier">
<div id="containSliders">
<!--Exercise time allocator-->
<h1></h1>
<!--I WOULD LIKE THIS TO UPDATE ALSO-->
<div id="containSliderOne">
<p>Time:</p>
<output id="timeValue">60 sec.</output>
<input type="range" id="determineTime" step="10" value="60" min="0" max="180" />
</div>
<!--Exercise time allocator-->
<div id="containSliderTwo">
<p>Rest Time:</p>
<output id="restValue">10 sec.</output>
<input type="range" id="determineRest" step="10" value="10" min="0" max="180" />
</div>
<!--Add rest button-->
<div id="addBreak">
<p>Add Break</p>
</div>
<!--Back Button-->
<div id="cancel">
<a id="exerciseCancel" href="exercises.html">
<img src="images/backButtonUp.png" width="100" alt="" />
<img src="images/backButtonDown.png" width="85" alt="" />
</a>
</div>
<!--Confirm Button-->
<div id="confirm">
<a id="exerciseConfirm" href="routineOverview.html">
<img src="images/whiteTickUp.png" width="95" alt="" />
<img src="images/whiteTickDown.png" width="80" alt="" />
</a>
</div>
</div>
</div>
It would be preferable to create the elements programatically.
var arrExercises = ['Push Ups', 'Dips', 'Burpees'];//add all exercises here
arrExercises.forEach(function(exercise, i){
var $exercise = $('<div>', {id:'div-excercise-'+i, "class":'exercise'});//create the exercise element
//give the on click handler to the exercise
$exercise.on('click', function(e){
$("#specifier").css("display", "block");
$(".backButton").css("display", "none");
$("#info").text(exercise);//set the info to the exercise text
});
$('#exerciseContainer').append($exercise);//append this exercise to the container
});
I recently installed "FullPage.js" to my site. I figured out how to get the slides working but the sections won't for some reason. Can't seem to find anything in the console.
<div class="section" id="section1">
<div class="slide active">
<div class="wrapper">
<span class="line"></span>
<div class="title">HOME</div>
<span class="line2"></span>
<div class="post">
<h1>Hey I'm <strong>Matt Hunzinger</strong></h1><br>
<p>I like making flat designs that <strong>elevate</strong> my client's businesses<br><br><span class="toSlide" data-index="3">Contact Me</span></p> <br> <hr> <br> <br> <br> <br> <br>
<div class="grid">
<span class="toSlide" data-index="2">
<div class="hex" id="about">
<li>About Me</li>
<img src="about.png">
</div>
</span>
<span class="toSlide" data-index="3">
<div class="hex" id="contact">
<img src="email.png">
</div>
</span>
<span class="toSlide" data-index="4">
<div class="hex" id="about">
<li>Work</li>
<img src="about.png">
</div>
</span>
<br>
</div>
</div>
</div>
</div>
</div>
<div class="section" id="section2">
<div class="slide">
<h1> hello all</h1>
</div>
</div>
JS
$(document).ready(function () {
$.fn.fullpage({
resize: false
});
});
I am making a page with a bunch of items on it with differing headings and text. I want the headings and text to all line up at the same height. Some headings will be 2 lines, some only 1. It needs to also be responsive, so I can't just set a min-height.
(source: iforce.co.nz)
Is it possible to get the h2's and p's to always be the same height? The hacky way I was thinking was padding out the shorter ones with javascript, but that is a last resort.
The HTML is:
<div class="itemContainer" style="width:25.0%;">
<div class="catItemView groupPrimary">
<div class="catItemHeader">
<h3 class="catItemTitle">
Wairamarama-Onewhero Seal Extension
</h3>
</div>
<div class="catItemBody">
<div class="catItemImageBlock">
<span class="catItemImage">
<a href="/index.php/projects/item/46-wairamarama-onewhero-seal-extension" title="Wairamarama-Onewhero Seal Extension">
<img src="/media/k2/items/cache/64d93d666355a43c4a86679a030d35b6_M.jpg" alt="Wairamarama-Onewhero Seal Extension" style="width:359px; height:auto;" />
</a>
</span>
<div class="clr"></div>
</div>
<div class="catItemIntroText">
<p>Evergreen Landcare have been involved in the Wairamarama-Onewhero Seal Extension as a sub-contractor for Heb Construction.</p>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
<div class="catItemReadMore">
<a class="k2ReadMore" href="/index.php/projects/item/46-wairamarama-onewhero-seal-extension">Read more...</a>
</div>
<div class="clr"></div>
</div>
This is generated by K2/Joomla! so there isn't much flexibility in it.
This is the page if you want to see it.
You could "fix" the appearance by setting the height of the elements that have variable content to some value that holds the largest. The follwoing CSS does this for the page you linked to:
div.catItemIntroText {
height: 180px;
}
div.catItemHeader h3.catItemTitle {
height: 45px;
}
This only works because you know in advance the height that looks best.
If you were in a position to alter your HTML you could take a fresh approach and use a grid system. Here is an approach that uses Twitter Bootstrap (demo)
<div class="container">
<div class="row">
<div class="span3">
<h2>Wairamarama-Onewhero Seal Extension</h2>
</div>
<div class="span3">
<h2>Te Rapa Pass</h2>
</div>
<div class="span3">
<h2>Stockton Mine</h2>
</div>
<div class="span3">
<h2>State Highway 88 Dunedin Realignment</h2>
</div>
</div>
<div class="row">
<div class="span3">
<img src="http://placekitten.com/200/300" />
</div>
<div class="span3">
<img src="http://placekitten.com/200/300" />
</div>
<div class="span3">
<img src="http://placekitten.com/200/300" />
</div>
<div class="span3 ReadMore">
<img src="http://placekitten.com/200/300" />
</div>
</div>
<div class="row">
<div class="span3 ReadMore"> <a href='#' class='btn btn-primary'>read more</a>
</div>
<div class="span3 ReadMore"> <a href='#' class='btn btn-primary'>read more</a>
</div>
<div class="span3 ReadMore"> <a href='#' class='btn btn-primary'>read more</a>
</div>
<div class="span3 ReadMore"> <a href='#' class='btn btn-primary'>read more</a>
</div>
</div>
</div>
By putting each row (of text, images and buttons) on it's own <div.row> the spill over is handled automatically.
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 9 years ago.
I'm trying to get the slider on the following page to display the freakin' images on the slider! http://www.ultimatebowhuntingtv.com/index.php/partners/ You can see in chrome developer tools under 'resources' that the images are being called from the correct location, so I just can't see why I can't see the images. I am using the AnythingSlider: http://css-tricks.com/anythingslider-jquery-plugin/. And the code is below. Slider html below the
<?php
/*
Template Name: Partners
*/
?>
<?php get_header(); ?>
</div>
</div>
<script src="/js/jquery-1.7.2.min.js"></script>
<script src="/js/lightbox.js"></script>
<link href="/js/lightbox.css" rel="stylesheet" />
<!-- Anything Slider -->
<link rel="stylesheet" href="/wp-content/themes/onplay/css/anythingslider.css">
<script src="/wp-content/themes/onplay/js/jquery.anythingslider.js"></script>
<!-- Define slider dimensions here -->
<style>
#slider { width: 700px; height: 390px; }
</style>
<!-- AnythingSlider initialization -->
<script>
// DOM Ready
var J=jQuery.noConflict();
J(function(){
J('#slider').anythingSlider();
});
</script>
<div id="main">
<div class="wrap-special">
<div class="content full-width-special">
<div class="post">
<h1 class="title-special" style="display: none;"><?php the_title(); ?></h1>
<?php wp_reset_query(); if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php edit_post_link( __('Edit', 'wpzoom'), ' ', ''); ?>
<div class="entry " style="color: #fff;">
<img src="/images/bkg-title-partners.jpg" /><br />
<!--INSERT SLIDER HERE-->
<ul id="slider">
<li><img src="/images/slider/slider-1.jpg" alt=""/></li>
<li><img src="/images/slider/slider-2.jpg" alt=""/></li>
<li><img src="/images/slider/slider-3.jpg" alt=""/></li>
<li><img src="/images/slider/slider-4.jpg" alt=""/></li>
</ul>
<div class="clear"></div>
<div id="partner-box">
<div id="Pwrapper">
<img class="hover" src="/images/partners/partner-300x250-scoutlook.jpg" alt="ScoutLook Weather" />
<div class="text">
<div class="partner-title">ScoutLook</div>
<div class="partner-website">Visit their website</div>
<div class="partner-text">Scoutlook is the most advanced weather resource available period! You have instant access to precise weather details, solunar data, game feeding times, wind direction helping you with Scent Cone, Deer Logs and much more. We rely on Scoutlook in our preparation and while we are in the field.</div>
<div class="partner-gTitle">Gallery <span style="color:#aeaeae; font-weight: normal;">- Click Image To Expand</span></div>
<div class="partner-gallery">
<img src="/images/partners/gallery-scoutlook-thumb-1.jpg" class="partner-gallery-thumb" />
<img src="/images/partners/gallery-scoutlook-thumb-2.jpg" class="partner-gallery-thumb" />
<div style="clear: left;"></div>
</div>
</div>
</div>
</div><!--close partner box-->
<div id="partner-box">
<div id="Pwrapper">
<img class="hover" src="/images/partners/partner-300x250-nufletch.jpg" alt="NuFletch Archery" />
<div class="text">
<div class="partner-title">NuFletch Archery</div>
<div class="partner-website">Visit their website</div>
<div class="partner-text"></div>
<div class="partner-gTitle">Gallery <span style="color:#aeaeae; font-weight: normal;">- Click Image To Expand</span></div>
<div class="partner-gallery">
<img src="/images/partners/gallery-nufletch-thumb-1.jpg" class="partner-gallery-thumb" />
<div style="clear: left;"></div>
</div>
</div>
</div>
</div><!--close partner box-->
<div id="partner-box">
<div id="Pwrapper">
<img class="hover" src="/images/partners/partner-300x250-pse.jpg" alt="PSE Archery" />
<div class="text">
<div class="partner-title">PSE Archery</div>
<div class="partner-website">Visit their website</div>
<div class="partner-text">We have used PSE Bows for the past five years and love them. Why?...It is because they are the fastest bows on the market and have become some of the most accurate bows a bowhunter can shoot. There are a lot of bows to choose from and we have shoot nearly all of them over the years. We are shooting the new PSE Dream Season DNA bow this year and new Smoke Crossbow. The DNA is the fastest, quietest, and most accurate bow I have put in my hands to date...</div>
<div class="partner-gTitle">Gallery <span style="color:#aeaeae; font-weight: normal;">- Click Image To Expand</span></div>
<div class="partner-gallery">
<img src="/images/partners/gallery-pse-thumb-1.jpg" class="partner-gallery-thumb" />
<div style="clear: left;"></div>
</div>
</div>
</div>
</div><!--close partner box-->
<div style="clear: left;"></div>
<div id="partner-box">
<div id="Pwrapper">
<img class="hover" src="/images/partners/partner-300x250-muddy-bloodsport.jpg" alt="Muddy Bloodsport" />
<div class="text">
<div class="partner-title">Muddy Bloodsport</div>
<div class="partner-website">Visit their website</div>
<div class="partner-text">Bloodsport arrows use Fly Straight Technology that allows them to be some of the most accurate arrows on the market. Additionally, the Carbon technology used ensures that they are the most durable arrow on the market. We have to know our arrow is going to be accurate and be durable so we can use them time and time again...</div>
<div class="partner-gTitle">Gallery <span style="color:#aeaeae; font-weight: normal;">- Click Image To Expand</span></div>
<div class="partner-gallery">
<img src="/images/partners/gallery-bloodsport-thumb-1.jpg" class="partner-gallery-thumb" />
<div style="clear: left;"></div>
</div>
</div>
</div>
</div><!--close partner box-->
<div id="partner-box">
<div id="Pwrapper">
<img class="hover" src="/images/partners/partner-300x250-big-green-targets.jpg" alt="Big Green Targets" />
<div class="text">
<div class="partner-title">Big Green Targets</div>
<div class="partner-website">Visit their website</div>
<div class="partner-text">Big Green Targets are the only target we use when we practice in the backyard, range or when we arrive at our hunting destination. They are made from 100% recycle material, heat bonded layered target and weather proof. This leads to a durable target that will last for long time withstanding thousands of shots. They have SUPER EASY Arrow Removal and are made here in the USA...</div>
<div class="partner-gTitle">Gallery <span style="color:#aeaeae; font-weight: normal;">- Click Image To Expand</span></div>
<div class="partner-gallery">
<img src="/images/partners/gallery-BGT-thumb-1.jpg" class="partner-gallery-thumb" />
<img src="/images/partners/gallery-BGT-thumb-2.jpg" class="partner-gallery-thumb" />
<img src="/images/partners/gallery-BGT-thumb-3.jpg" class="partner-gallery-thumb" />
<div style="clear: left;"></div>
</div>
</div>
</div>
</div><!--close partner box-->
<div id="partner-box">
<div id="Pwrapper">
<img class="hover" src="/images/partners/partner-300x250-redneck-blinds.jpg" alt="Redneck Blinds" />
<div class="text">
<div class="partner-title">Redneck Blinds</div>
<div class="partner-website">Visit their website</div>
<div class="partner-text">Redneck Blinds are a new addition to our hunting tools. When you step into a Red Neck Blind you will see why they are becoming a market leader. The 360 degree shooting ability, carpet floors, adjustable windows and generous room for several hunters or camera man. We also love them because they help control our scent!</div>
<div class="partner-gTitle">Gallery <span style="color:#aeaeae; font-weight: normal;">- Click Image To Expand</span></div>
<div class="partner-gallery">
<img src="/images/partners/gallery-RNB-thumb-1.jpg" class="partner-gallery-thumb" />
<div style="clear: left;"></div>
</div>
</div>
</div>
</div><!--close partner box-->
<div style="clear: left;"></div>
<div id="partner-box">
<div id="Pwrapper">
<img class="hover" src="/images/partners/partner-300x250-spypoint.jpg" alt="Spypoint Game Cameras" />
<div class="text">
<div class="partner-title">Spypoint Game Cameras</div>
<div class="partner-website">Visit their website</div>
<div class="partner-text">Spypoint is becoming the market leader when it comes to producing the most innovative game cameras on the market. We rely on and use the LIVE 3G, Tiny W2 and new Tiny W3 wireless cameras to help us monitor our deer herd year round. Spypoint also produces high quality security cameras such as the BF-8 with BLACK LED Technology.</div>
<div class="partner-gTitle">Gallery <span style="color:#aeaeae; font-weight: normal;">- Click Image To Expand</span></div>
<div class="partner-gallery">
<img src="/images/partners/gallery-spypoint-thumb-1.jpg" class="partner-gallery-thumb" />
<img src="/images/partners/gallery-spypoint-thumb-2.jpg" class="partner-gallery-thumb" />
<img src="/images/partners/gallery-spypoint-thumb-3.jpg" class="partner-gallery-thumb" />
<img src="/images/partners/gallery-spypoint-thumb-4.jpg" class="partner-gallery-thumb" />
<img src="/images/partners/gallery-spypoint-thumb-5.jpg" class="partner-gallery-thumb" />
<div style="clear: left;"></div>
</div>
</div>
</div>
</div><!--close partner box-->
<div id="partner-box">
<div id="Pwrapper">
<img class="hover" src="/images/partners/partner-300x250-swhacker.jpg" alt="Swhacker Broadhead" />
<div class="text">
<div class="partner-title">Swhacker Broadheads</div>
<div class="partner-website">Visit their website</div>
<div class="partner-text">When it comes to broadheads Swhacker has become our broadhead of choice. We have 100% confidence in these broadheads for both our bows and crossbows. They Fly like a field point and have a huge cutting diameter. Broadside shots, angled shots or less than perfect shots the Swhacker gets the job done. I shot my Turkey Grand Slam with the Swhacker...</div>
<div class="partner-gTitle">Gallery <span style="color:#aeaeae; font-weight: normal;">- Click Image To Expand</span></div>
<div class="partner-gallery">
<img src="/images/partners/gallery-swhacker-thumb-1.jpg" class="partner-gallery-thumb" />
<div style="clear: left;"></div>
</div>
</div>
</div>
</div><!--close partner box-->
<div id="partner-box">
<div id="Pwrapper">
<img class="hover" src="/images/partners/partner-300x250-yeti.jpg" alt="Yeti Coolers" />
<div class="text">
<div class="partner-title">Yeti Coolers</div>
<div class="partner-website">Visit their website</div>
<div class="partner-text">We started using Yeti coolers this year as we Bowfish, Spearfish, and everyday use. We love how durable they are and how well they keep our food and game cool. Especially, on those long days on the water or traveling back from hunting trip. We are using the Series 35 and 65 this year and love them!</div>
<div class="partner-gTitle">Gallery <span style="color:#aeaeae; font-weight: normal;">- Click Image To Expand</span></div>
<div class="partner-gallery">
<img src="/images/partners/gallery-yeti-thumb-1.jpg" class="partner-gallery-thumb" />
<div style="clear: left;"></div>
</div>
</div>
</div>
</div><!--close partner box-->
<div style="clear: left;"></div>
<div id="partner-box">
<div id="Pwrapper">
<img class="hover" src="/images/partners/partner-300x250-always-lethal.jpg" alt="Under Armor Always Lethal" />
<div class="text">
<div class="partner-title">Under Armor Always Lethal</div>
<div class="partner-website">Visit their website</div>
<div class="partner-text">There is nothing worse than being too hot, too cold or uncomfortable in the woods. Minimizing your movement is key to our success not matter if we are turkey hunting or bowhunting big game. Under Armour clothing keeps us cool and comfortable in the Spring and Summer. During the Fall and Winter we can stay in the woods longer because of the layering technology. We are also using the new Scent Control Clothing along with HAW Rubber Boots that are extremely comfortable.</div>
<!--<div class="partner-gTitle">Gallery <span style="color:#aeaeae; font-weight: normal;">- Click Image To Expand</span></div>
<div class="partner-gallery">
<img src="/images/partners/gallery-lethal-thumb-1.jpg" class="partner-gallery-thumb" />
<div style="clear: left;"></div>
</div>-->
</div>
</div>
</div><!--close partner box-->
<div id="partner-box">
<div id="Pwrapper">
<img class="hover" src="/images/partners/partner-300x250-mossy-oak.jpg" alt="Mossy Oak" />
<div class="text">
<div class="partner-title">Mossy Oak</div>
<div class="partner-website">Visit their website</div>
<div class="partner-text">Mossy Oak Infinity keeps us concealed during the fall no matter where we are bowhunting. The level of depth, detail and definition is awesome with this pattern. Our goal is the ensure we cover every base we can to put the advantage in our corner no matter if we are turkey hunting or bowhunting big game. Mossy Oak Infinity in the fall gives us that edge..In the Spring we rely on Mossy Oak Obsession based on lighter colors and green elements incorporated into the pattern.</div>
<!--<div class="partner-gTitle">Gallery <span style="color:#aeaeae; font-weight: normal;">- Click Image To Expand</span></div>
<div class="partner-gallery">
<img src="/images/partners/gallery-mossy-thumb-1.jpg" class="partner-gallery-thumb" />
<div style="clear: left;"></div>
</div>-->
</div>
</div>
</div><!--close partner box-->
<div id="partner-box">
<div id="Pwrapper">
<img class="hover" src="/images/partners/partner-300x250-muddy.jpg" alt="Muddy" />
<div class="text">
<div class="partner-title">Muddy</div>
<div class="partner-website">Visit their website</div>
<div class="partner-text">Muddy Tree Stands in our opinion are some of the most versatile stands on the market. We love the adjustablity of their lock on stands that allow you to set up in a less than straight tree and still be comfortable for all day sit. Additionally, we use their safeguard harness for ourselves and our boys who hunt with us. I have 100% confidence in these safety harnesses to keep me and my children safe..</div>
<div class="partner-gTitle">Gallery <span style="color:#aeaeae; font-weight: normal;">- Click Image To Expand</span></div>
<div class="partner-gallery">
<img src="/images/partners/gallery-muddy-thumb-1.jpg" class="partner-gallery-thumb" />
<img src="/images/partners/gallery-muddy-thumb-2.jpg" class="partner-gallery-thumb" />
<img src="/images/partners/gallery-muddy-thumb-3.jpg" class="partner-gallery-thumb" />
<img src="/images/partners/gallery-muddy-thumb-4.jpg" class="partner-gallery-thumb" />
<img src="/images/partners/gallery-muddy-thumb-5.jpg" class="partner-gallery-thumb" />
<img src="/images/partners/gallery-muddy-thumb-7.jpg" class="partner-gallery-thumb" />
<div style="clear: left;"></div>
</div>
</div>
</div>
</div><!--close partner box-->
<div style="clear: left;"></div>
<?php the_content(); ?>
<?php wp_link_pages(array('before' => '<p class="pages"><strong>'.__('Pages', 'wpzoom').':</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
<div class="clear"></div>
</div><!-- / .entry -->
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria', 'wpzoom');?>.</p>
<?php endif; ?>
<div class="clear"></div>
</div><!-- / .post -->
<div class="clear"></div>
</div><!-- / #content -->
<?php get_footer(); ?>
Your #slider container is set to display:none in your file style.css, at line 274.
Remove the display style or set it to block and your slider will show.