how to create carousel slider in cold fusion?

Forum|Forum|5 years ago
May 2, 2020
2 replies
2171 views

how to create carousel slider in cold fusion? actually this carousel slider is in bootstrap. i wants to create it coldfusion.

Builder

This topic has been closed for replies.

WolfShade

Legend

Trying really hard to not split hairs.. and failing.

Technically speaking, it's still a Bootstrap carousel, but in a .cfm page. CF is not actually doing anyting, because the carousel is a JavaScript client-side process, and CF is strictly server-side. But, BKBK is right in that it will work. It's just not being processed by CF because it _can't_ be processed by CF Server.

Sorry.. off my soapbox.. 🙂

V/r,

^ _ ^

BKBK

Community Expert

Ha ha, you're certainly not splitting hairs, WolfShade . No CFML code has been added. So, you're right. As it stands, the page is basically HTML.

However, my assumption is that Asksnbbb wishes to add some ColdFusion functionality to the carousel. In fact, I thought of a query to get images or image URLs from a database.

WolfShade

Legend

🙂 I split hairs all the time.. I'm pedantic.. to a fault, sometimes.

To me, I think that the best way to do a carousel is to load the page without images, other than a 'spinning wheel' to show a process going in the background, then use either a query to get images from a database (AJaX), or use cfdirectory on the folder where the images are stored, and use JavaScript to load all the images directly into memory, and then set up the slideshow and start it. Or leave it to the user to manually scroll through (my fave option.)

V/r,

^ _ ^

BKBK

Community Expert

No problem, Asksnbbb. You have already found the solution yourself!

The steps are as follows:

From the bbbootstrap.com page you mention,

1) copy the code from the HTML tab and store it as a CFM file, for example, carousel.cfm.

2) copy the code from the CSS tab and store it as inline style in carousel.cfm. I would suggest you change "display: flex; " (which might be incompatible in some browsers) to "display: block flex;".

3) copy the links from the Resources tab to the <head> of your CFM file, as the respective style and script files.

The result should be something like:

<html>
	
<head>
	<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"></link>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"></link>
	<style>
		@import url("https://fonts.googleapis.com/css?family=Calibri:400,300,700");

		body {
		    vertical-align: middle;
		    display: block flex;
		    font-family: 'Calibri', sans-serif !important;
		    background-color: #eee
		}
		
		.mt-100 {
		    margin-top: 100px
		}
		
		.carousel .carousel-indicators li {
		    display: inline-block;
		    width: 10px;
		    height: 10px;
		    text-indent: -99px;
		    cursor: pointer;
		    border: 1px solid #fff;
		    background: #fff;
		    border-radius: 2px
		}
	</style>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>

<div class="container mt-100">
    <div class="row">
        <div class="col-md-8 mr-auto ml-auto">
            <div class="card card-raised card-carousel">
                <div id="carouselindicators" class="carousel slide" data-ride="carousel" data-interval="3000">
                    <ol class="carousel-indicators">
                        <li data-target="#carouselindicators" data-slide-to="0" class=""></li>
                        <li data-target="#carouselindicators" data-slide-to="1" class="active"></li>
                        <li data-target="#carouselindicators" data-slide-to="2" class=""></li>
                    </ol>
                    <div class="carousel-inner">
                        <div class="carousel-item active carousel-item-left"> <img class="d-block w-100" src="https://i.imgur.com/kjR96mD.jpg" alt="First slide">
                            <div class="carousel-caption d-none d-md-block">
                                <h4> <i class="fa fa-map-marker"></i> Dharamshala,Himachal Pradesh, India </h4>
                            </div>
                        </div>
                        <div class="carousel-item carousel-item-next carousel-item-left"> <img class="d-block w-100" src="https://i.imgur.com/l3iUv92.jpg" alt="Second slide">
                            <div class="carousel-caption d-none d-md-block">
                                <h4> <i class="fa fa-map-marker"></i> Manali,Himachal Pradesh, India </h4>
                            </div>
                        </div>
                        <div class="carousel-item"> <img class="d-block w-100" src="https://i.imgur.com/rHCSTM1.jpg" alt="Third slide">
                            <div class="carousel-caption d-none d-md-block">
                                <h4> <i class="fa fa-map-marker"></i> Kerala,Kerala, India </h4>
                            </div>
                        </div>
                    </div> <a class="carousel-control-prev" href="#carouselindicators" role="button" data-slide="prev" data-abc="true"> <i class="fa fa-chevron-left"></i> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselindicators" role="button" data-slide="next" data-abc="true"> <i class="fa fa-chevron-right"></i> <span class="sr-only">Next</span> </a>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

4) Change the image URLs to the URLs of your own images.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded