Created
May 8, 2014 19:14
-
-
Save joseadanof/2c3875bcb7b33f09228d to your computer and use it in GitHub Desktop.
3 Products Slider Wordpress, bootstrap based
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$('#productCarousel').carousel({ | |
interval: 10000 | |
}); | |
$('.pcarousel .item').each(function(){ | |
var next = $(this).next(); | |
if (!next.length) { | |
next = $(this).siblings(':first'); | |
} | |
next.children(':first-child').clone().appendTo($(this)); | |
if (next.next().length>0) { | |
next.next().children(':first-child').clone().appendTo($(this)); | |
} | |
else { | |
$(this).siblings(':first').children(':first-child').clone().appendTo($(this)); | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// | |
// Carousel | |
// -------------------------------------------------- | |
// Wrapper for the slide container and indicators | |
.pcarousel { | |
position: relative; | |
margin-top: 25px; | |
} | |
.pcarousel-inner { | |
position: relative; | |
overflow: hidden; | |
width: 100%; | |
> .item { | |
display: none; | |
position: relative; | |
.transition(.6s ease-in-out left); | |
// Account for jankitude on images | |
> img, | |
> a > img { | |
&:extend(.img-responsive); | |
line-height: 1; | |
} | |
} | |
> .active, | |
> .next, | |
> .prev { display: block; } | |
> .active { | |
left: 0; | |
} | |
> .next, | |
> .prev { | |
position: absolute; | |
top: 0; | |
width: 100%; | |
} | |
> .next { | |
left: 100%; | |
} | |
> .prev { | |
left: -100%; | |
} | |
> .next.left, | |
> .prev.right { | |
left: 0; | |
} | |
> .active.left { | |
left: -100%; | |
} | |
> .active.right { | |
left: 100%; | |
} | |
} | |
// Left/right controls for nav | |
// --------------------------- | |
.pcarousel-control { | |
position: absolute; | |
top: 0; | |
left: 0; | |
bottom: 0; | |
width: @carousel-control-width; | |
.opacity(@carousel-control-opacity); | |
font-size: @carousel-control-font-size; | |
color: @carousel-control-color; | |
text-align: center; | |
text-shadow: @carousel-text-shadow; | |
// We can't have this transition here because WebKit cancels the carousel | |
// animation if you trip this while in the middle of another animation. | |
// Set gradients for backgrounds | |
&.left { | |
#gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001)); | |
} | |
&.right { | |
left: auto; | |
right: 0; | |
#gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5)); | |
} | |
// Hover/focus state | |
&:hover, | |
&:focus { | |
outline: none; | |
color: @carousel-control-color; | |
text-decoration: none; | |
.opacity(.9); | |
} | |
// Toggles | |
.icon-prev, | |
.icon-next, | |
.glyphicon-chevron-left, | |
.glyphicon-chevron-right { | |
position: absolute; | |
top: 50%; | |
z-index: 5; | |
display: inline-block; | |
} | |
.icon-prev, | |
.glyphicon-chevron-left { | |
left: 50%; | |
} | |
.icon-next, | |
.glyphicon-chevron-right { | |
right: 50%; | |
} | |
.icon-prev, | |
.icon-next { | |
width: 20px; | |
height: 20px; | |
margin-top: -10px; | |
margin-left: -10px; | |
font-family: serif; | |
} | |
.icon-prev { | |
&:before { | |
content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039) | |
} | |
} | |
.icon-next { | |
&:before { | |
content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A) | |
} | |
} | |
} | |
// Optional indicator pips | |
// | |
// Add an unordered list with the following class and add a list item for each | |
// slide your carousel holds. | |
.pcarousel-indicators { | |
position: absolute; | |
bottom: 10px; | |
left: 50%; | |
z-index: 15; | |
width: 60%; | |
margin-left: -30%; | |
padding-left: 0; | |
list-style: none; | |
text-align: center; | |
li { | |
display: inline-block; | |
width: 10px; | |
height: 10px; | |
margin: 1px; | |
text-indent: -999px; | |
border: 1px solid @carousel-indicator-border-color; | |
border-radius: 10px; | |
cursor: pointer; | |
// IE8-9 hack for event handling | |
// | |
// Internet Explorer 8-9 does not support clicks on elements without a set | |
// `background-color`. We cannot use `filter` since that's not viewed as a | |
// background color by the browser. Thus, a hack is needed. | |
// | |
// For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we | |
// set alpha transparency for the best results possible. | |
background-color: #000 \9; // IE8 | |
background-color: rgba(0,0,0,0); // IE9 | |
} | |
.active { | |
margin: 0; | |
width: 12px; | |
height: 12px; | |
background-color: @carousel-indicator-active-bg; | |
} | |
} | |
// Optional captions | |
// ----------------------------- | |
// Hidden by default for smaller viewports | |
.pcarousel-caption { | |
position: absolute; | |
left: 15%; | |
right: 15%; | |
bottom: 20px; | |
z-index: 10; | |
padding-top: 20px; | |
padding-bottom: 20px; | |
color: @carousel-caption-color; | |
text-align: center; | |
text-shadow: @carousel-text-shadow; | |
& .btn { | |
text-shadow: none; // No shadow for button elements in carousel-caption | |
} | |
} | |
// Scale up controls for tablets and up | |
@media screen and (min-width: @screen-sm-min) { | |
// Scale up the controls a smidge | |
.pcarousel-control { | |
.glyphicon-chevron-left, | |
.glyphicon-chevron-right, | |
.icon-prev, | |
.icon-next { | |
width: 30px; | |
height: 30px; | |
margin-top: -15px; | |
margin-left: -15px; | |
font-size: 30px; | |
} | |
} | |
// Show and left align the captions | |
.pcarousel-caption { | |
left: 20%; | |
right: 20%; | |
padding-bottom: 30px; | |
} | |
// Move up the indicators | |
.pcarousel-indicators { | |
bottom: 20px; | |
} | |
} | |
.pcarousel-inner .active.left { left: -33%; } | |
.pcarousel-inner .next { left: 33%; } | |
.pcarousel-inner .prev { left: -33%; } | |
.pcarousel-control { width: 4%; } | |
.pcarousel-control.left,.pcarousel-control.right { margin-left:-12px;background-image:none;} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
slider-productos.php | |
<?php | |
$args = array( | |
'posts_per_page' => 10, | |
'post_type' => 'Productos', | |
'wpcf-producto-destacado' => 1 | |
); | |
query_posts($args); | |
?> | |
<h1 class="margenh1">Tele Plastic, C.A. es una de las empresas más importantes de la industria del plástico en Venezuela, dedicada a la fabricación y desarrollo de películas de polietileno y polipropileno y cestas industriales.</h1> | |
<div class="pcarousel slide" id="productCarousel" data-ride="carousel"> | |
<div class="pcarousel-inner"> | |
<?php if( have_posts() ): $is_first = true; ?> | |
<?php while ( have_posts() ) : the_post(); ?> | |
<div class="item <?php if($is_first){ echo 'active'; $is_first = false; }?>"> | |
<div class="col-md-4"> | |
<a href="<?php the_permalink(); ?>"> | |
<img height="250" width="250" src="<?php echo get_post_meta($post->ID,'wpcf-foto-producto',TRUE)?>" alt="<?php echo get_post_meta($post->ID,'wpcf-titulo-completo',TRUE)?>" class="img-responsive"> | |
<div class="productTitle"> | |
<?php echo get_post_meta($post->ID,'wpcf-titulo-completo',TRUE)?> | |
</div> | |
</a> | |
</div> | |
</div> | |
<?php endwhile; ?> | |
<?php endif; ?> | |
</div> | |
<a class="left pcarousel-control" href="#productCarousel" data-slide="prev"> | |
<i class="glyphicon glyphicon-chevron-left"></i> | |
</a> | |
<a class="right pcarousel-control" href="#productCarousel" data-slide="next"> | |
<i class="glyphicon glyphicon-chevron-right"></i> | |
</a> | |
</div> | |
<?php wp_reset_query(); ?> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment