Highlighted

how to create carousel slider in cold fusion?

New Here ,
May 02, 2020

Copy link to clipboard

Copied

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

TOPICS
Builder

Views

1.5K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

how to create carousel slider in cold fusion?

New Here ,
May 02, 2020

Copy link to clipboard

Copied

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

TOPICS
Builder

Views

1.5K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 02, 2020 0
Adobe Community Professional ,
May 03, 2020

Copy link to clipboard

Copied

No problem, AsksnbbbYou 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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 03, 2020 0
LEGEND ,
May 04, 2020

Copy link to clipboard

Copied

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,

 

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 04, 2020 1
Adobe Community Professional ,
May 05, 2020

Copy link to clipboard

Copied

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. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 05, 2020 0
LEGEND ,
May 05, 2020

Copy link to clipboard

Copied

🙂  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,

 

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 05, 2020 0