Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!-- COMMENTS
All floats and clears have been removed to simplify the code for problem solving.
* jQuery Cycle Plugin (with Transition Definitions)
* Examples and documentation at: http://jquery.malsup.com/cycle/
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<style type="text/css">
/* start reset */
body, div, span, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, button, p, blockquote, table, th, td {
margin:0px;
padding:0px;
}
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:100.01%;
color:black;
background-color:#f9f9f9;
}
p {margin:.2em 0 .8em 0;}
ul, ol, li {margin:0 0 0 1.4em; padding:0px;}
ul, ol {margin-top:.2em; margin-bottom:.8em;}
a img {border:none;}
/* end reset */
#content {
width:960px;
margin:20px auto;
}
/* start carousel */
#content #featured-carousel {
position:relative;
width:100%;
border:1px solid #cad6e8;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
margin-bottom:2em;
}
#content #featured-carousel ul { /* ul#carousel-items */
background-color:lightyellow; /* ADDED FOR TEST PURPOSES */
position:relative;
width:100%;
margin:0;
}
#content #featured-carousel ul li {
list-style:none;
position:absolute; /* COMMENTED OUT FOR TEST PURPOSES */
width:100%;
/* overflow:hidden; */ /* COMMENTED OUT FOR TEST PURPOSES */
height:auto !important;
min-height:100%;
height:100%;
margin:0;
padding:0;
}
#content #featured-carousel ul li div.carousel-content-left {}
#content #featured-carousel ul li div.carousel-content-left-inner {
padding:.4em .4em .4em .8em;
}
#content #featured-carousel ul li div.carousel-content-right {
text-align:center;
}
#content #featured-carousel ul li div.carousel-content-right-inner {
padding:.4em .8em .4em .4em;
}
#content #featured-carousel ul li div.carousel-content-right-inner a {}
#content #featured-carousel ul li.both {
outline:1px dotted magenta; /* ADDED FOR TEST PURPOSES */
display:table !important; /* !important is REQUIRED here */
height:100% !important; /* !important is REQUIRED here */
}
#content #featured-carousel ul li.both div.carousel-content-left,
#content #featured-carousel ul li.both div.carousel-content-right {
outline:1px dotted cyan; /* ADDED FOR TEST PURPOSES */
display:table-cell;
width:50%;
vertical-align:top;
}
#content #featured-carousel ul li.both div.carousel-content-right {
vertical-align:middle;
}
#content #featured-carousel ul li.both div.carousel-content-right-inner {
padding:.4em .4em .4em .4em;
}
#content #featured-carousel ul li.nocontent div.carousel-content-left,
#content #featured-carousel ul li.nocontent div.carousel-content-right,
#content #featured-carousel ul li.nothumb div.carousel-content-left {
display:block;
width:100%;
}
#content #featured-carousel ul li.nocontent div.carousel-content-right-inner img,
#content #featured-carousel ul li.nothumb div.carousel-content-right-inner img {
margin-top:0;
}
#content #featured-carousel ul li.nothumb div.carousel-content-right {
display:none;
width:0;
}
#content #featured-carousel #carousel-nav {
position:relative;
text-align:center;
padding:.4em 0 .3em 0;
border-top:1px solid #cad6e8;
}
#content #featured-carousel #carousel-nav-pages a {
display:inline-block;
background:#ccc;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
width:15px;
height:15px;
margin:0px 4px 2px 4px;
}
#content #featured-carousel #carousel-nav-pages a:hover,
#content #featured-carousel #carousel-nav-pages a.activeSlide {
background:#00a0e4;
}
#content #featured-carousel a#carousel-next-link,
#content #featured-carousel a#carousel-prev-link {
display:inline-block;
width:20px;
height:20px;
}
#content #featured-carousel a#carousel-prev-link,
#content #featured-carousel a#carousel-next-link {
background:#ccc;
}
#content #featured-carousel a#carousel-prev-link:hover,
#content #featured-carousel a#carousel-next-link:hover {
background:#00a0e4;
}
</style>
<title></title>
</head>
<body>
<div id="content">
<div id="content-inner">
<!-- begin content -->
<div id="featured-carousel">
<ul id="carousel-items">
<li class="nocontent" id="post-228">
<div class="carousel-content-left">
<div class="carousel-content-left-inner">
<h2 class="carousel-title"><a href="#">More Plans</a></h2>
<div class="entry-meta"><span class="post-date">Published on September 7, 2012</span></div>
<div class="carousel-summary"></div>
</div>
</div>
<div class="carousel-content-right">
<div class="carousel-content-right-inner">
<a href="#"><img width="320" height="200" alt="" class="attachment-carousel-thumb wp-post-image" src="http://www.placehold.it/320x200"></a>
</div>
</div>
</li>
<li class="both" id="post-87">
<div class="carousel-content-left">
<div class="carousel-content-left-inner">
<h2 class="carousel-title"><a href="#">Some Announcements</a></h2>
<div class="entry-meta"><span class="post-date">Published on August 24, 2012</span></div>
<div class="carousel-summary"><p>Lorem ipsum dolor sit amet. Ut enim ad minim veniam, quis ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum...<a href="#">Read More »</a></p></div>
</div>
</div>
<div class="carousel-content-right">
<div class="carousel-content-right-inner">
<a href="#"><img width="320" height="200" alt="" class="attachment-carousel-thumb wp-post-image" src="http://www.placehold.it/320x200"></a>
</div>
</div>
</li>
<li class="nothumb" id="post-90">
<div class="carousel-content-left">
<div class="carousel-content-left-inner">
<h2 class="carousel-title"><a href="#">Small Plans</a></h2>
<div class="entry-meta"><span class="post-date">Published on August 22, 2012</span></div>
<div class="carousel-summary"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum... <a href="#">Read More »</a></p></div>
</div>
</div>
<div class="carousel-content-right">
<div class="carousel-content-right-inner">
<a href="#"><img src="http://www.placehold.it/125x97" alt=""></a>
</div>
</div>
</li>
</ul>
<div id="carousel-nav">
<a title="Previous" id="carousel-prev-link" href="#"></a>
<span id="carousel-nav-pages"></span>
<a title="Next" id="carousel-next-link" href="#"></a>
</div>
<script type="text/javascript">
$('#featured-carousel ul').cycle({
fx:'fade',
speed:600,
timeout:1000,
prev: '#carousel-prev-link',
next: '#carousel-next-link',
pager: '#carousel-nav-pages',
pause: 1,
pagerAnchorBuilder: function(idx, slide) {
var index = idx+1;
return '<a href="#" title="'+index+'"><\/a>';
}
});
</script>
</div>
<!--end content -->
</div>
</div>
</body>
</html>
Reply With Quote
Originally Posted by markbrown4
Bookmarks