It is possible to slide articles with Bootstrap Carousel?

imagosonus · Post by **imagosonus** » Tue Jan 20, 2015 1:15 pm

I'm building a Bootstrap Carousel Module that seem to work ok.
I would like to know if is possible to slide even articles...
I did it this way...
default.php

Code: Select all

<?php 
for ($i=0;$i<=10;$i++) {
${'file'.$i} = $params->get('file'.$i);
${'file'.$i.'active'} = $params->get('file'.$i.'active');
${'file'.$i.'link'} = $params->get('file'.$i.'link');
${'file'.$i.'caption1'} = $params->get('file'.$i.'caption1');
${'file'.$i.'caption2'} = $params->get('file'.$i.'caption2');
${'file'.$i.'alt'} = $params->get('file'.$i.'alt');
${'file'.$i.'first'} = $params->get('file'.$i.'first');
}

$Ttime = $params->get('Ttime');
?>

<div class="carousel slide" id="myCarousel">
<ol class="carousel-indicators">
<?php for ($i=0;$i<=10;$i++) { if (${'file'.$i} && ${'file'.$i.'active'} == 1 && ${'file'.$i} != " ") {?>
<?php if ($params->get('file'.$i.'active')) { ?>
<li data-slide-to="<?php echo $i; ?>" data-target="#myCarousel"></li><?php } ?>
<?php } }?> 
</ol>
<div class="carousel-inner">
<?php for ($i=0;$i<=10;$i++) { if (${'file'.$i} && ${'file'.$i.'active'} == 1 && ${'file'.$i} != " ") {?>
<?php if (${'file'.$i.'link'}) { ?>
<div style="padding-bottom: 0;" class="item<?php echo ${'file'.$i.'first'}; ?>">
<a href="<?php echo ${'file'.$i.'link'}; ?>" target="_<?php echo $target ?>"><img src="<?php echo ${'file'.$i}; ?>" alt="<?php echo ${'file'.$i.'alt'}; ?>" /></a>
<div class="carousel-caption">
<h4><?php echo ${'file'.$i.'caption1'}; ?></h4>
<p><?php echo ${'file'.$i.'caption2'}; ?></p>
</div>
</div>
<?php } else { ?>
<div style="padding-bottom: 0;" class="item<?php echo ${'file'.$i.'first'}; ?>"><img src="<?php echo ${'file'.$i}; ?>" alt="<?php echo ${'file'.$i.'alt'}; ?>" />
<div class="carousel-caption">
<h4><?php echo ${'file'.$i.'caption1'}; ?></h4>
<p><?php echo ${'file'.$i.'caption2'}; ?></p>
</div>
</div>
<?php } ?>
<?php } }?>

the only way to make it auto play seem to be to add this java script at the end of default.php "var $ = jQuery.noConflict();
$(document).ready(function() {
$('.carousel').carousel({ interval: <?php echo $Ttime ?> });
}); "
and the xml:

Code: Select all

<fields name="params">
<fieldset name="basic" label="">
       <field
						name="Ttime"
						type="text"
                        default="3000"
						label="Carousel Transition Time"
						description="Input Carousel Transition Time in milliseconds" />

        <field
						name="file0active"
                        type="radio"
						default="1"
						class="btn-group"
						label="Show Slide 1"
						description="Choose if the slide should be displayed or not.">
							<option	value="1">Yes</option>
							<option	value="0">No</option>
                        </field>
        <field
						name="file0first"
                        type="hidden"
						default=" active"
					    label="file1first"
						/>
        <field
						name="file0caption1"
						type="text"
						label="Slide 1 Caption Header"
						description="Caption text for the header" />

        <field
						name="file0caption2"
						type="text"
						label="Slide 1 Caption Paragraph"
						description="Caption text for the paragraph" />
        
        <field
						name="file0"
						type="media"
						default=""
						label="Select Slide 1"
						description="" />
                        
        <field
						name="file0link"
						type="text"
						label="Slide 1 Link"
						description="URL for this slide" />  
                        
        <field
						name="file0alt"
						type="text"
						label="Slide 1 Image Alt"
						description="Image ALT tag for this slide" />                                            
                        
                
        
        <field type="spacer" hr="true" />
    
        <field
						name="file1active"
                        type="radio"
						default="1"
						class="btn-group"
						label="Show Slide 2"
						description="Choose if the slide should be displayed or not.">
							<option	value="1">Yes</option>
							<option	value="0">No</option>
                        </field>
                        
        <field
						name="file1caption1"
						type="text"
						label="Slide 2 Caption Header"
						description="Caption text for the header" />

        <field
						name="file1caption2"
						type="text"
						label="Slide 2 Caption Paragraph"
						description="Caption text for the paragraph" />
                        
        <field
						name="file1"
						type="media"
						default=""
						label="Select Slide 2"
						description="" />
                        
        <field
						name="file1link"
						type="text"
						label="Slide 2 Link"
						description="URL for this slide" />  
                        
        <field
						name="file1alt"
						type="text"
						label="Slide 2 Image Alt"
						description="Image ALT tag for this slide" />                
                        
        
        <field type="spacer" hr="true" />               
                       
        <field
						name="file2active"
						type="radio"
						default="1"
						class="btn-group"
						label="Show Slide 3"
						description="Choose if the slide should be displayed or not.">
							<option	value="1">Yes</option>
							<option	value="0">No</option>
                        </field>
                        
        <field
						name="file2caption1"
						type="text"
						label="Slide 3 Caption Header"
						description="Caption text for the header" />

		<field
						name="file2caption2"
						type="text"
						label="Slide 3 Caption Paragraph"
						description="Caption text for the paragraph" />
                        
        <field
						name="file2"
						type="media"
						default=""
						label="Select Slide 3"
						description="" />
                        
        <field
						name="file2link"
						type="text"
						label="Slide 3 Link"
						description="URL for this slide" />  
                        
        <field
						name="file2alt"
						type="text"
						label="Slide 3 Image Alt"
						description="Image ALT tag for this slide" />                
                        
        <field type="spacer" hr="true" /> 
                        
        <field
						name="file3active"
						type="radio"
						default="1"
						class="btn-group"
						label="Show Slide 4"
						description="Choose if the slide should be displayed or not.">
							<option	value="1">Yes</option>
							<option	value="0">No</option>
                        </field>
        <field
						name="file3caption1"
						type="text"
						label="Slide 4 Caption Header"
						description="Caption text for the header" />

		<field
						name="file3caption2"
						type="text"
						label="Slide 4 Caption Paragraph"
						description="Caption text for the paragraph" />
                        
        <field
						name="file3"
						type="media"
						default=""
						label="Select Slide 4"
						description="" />
                        
        <field
						name="file3link"
						type="text"
						label="Slide 4 Link"
						description="URL for this slide" />  
                        
        <field
						name="file3alt"
						type="text"
						label="Slide 4 Image Alt"
						description="Image ALT tag for this slide" />                


</fieldset>