How to best use the Page Builder and rich text?
2025/02/24 7:43 AM
AS you can see this is my carousel and there is no option to change the carousel images....how can i solve as i've added the carousel html in the richtext.
Here is my code
<div>
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"> </button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"> </button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"> </button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="3" aria-label="Slide 4"> </button>
</div>
<div class="carousel-inner">
<div class="carousel-item"><img src="..." class="w-100 fr-fic fr-dii" alt="1.jpg" title="1.jpg"> <img src="..." class="mobile-view w-100 fr-fic fr-dii" alt="4.jpg" title="4.jpg">
<div class="carousel-caption">
<div class="container">
<div class="row">
<div class="col-lg-6 box-1">
<h5 data-aos="fade-up" data-aos-duration="1000" class="aos-init aos-animate">Exclusively dedicated to healthcare</h5>
<p data-aos="fade-up" data-aos-duration="2000" class="aos-init aos-animate">We’re proud to have solely served the healthcare industry for over a decade. Learn more about how our focused expertise delivers value and savings across our diverse solutions</p><a href="..." data-aos="fade-up" data-aos-duration="3000" class="aos-init aos-animate">Explore our services</a></div></div></div></div></div>
<div class="carousel-item"><img src="..." class="w-100 fr-fic fr-dii" alt="2.jpg"> <img src="..." class="mobile-view w-100 fr-fic fr-dii" alt="mob-banner-3.png">
<div class="carousel-caption">
<div class="container">
<div class="row">
<div class="col-lg-7 box-2">
<h5 data-aos="fade-up" data-aos-duration="1000" class="aos-init aos-animate">Medxcel National Director named in Becker's Healthcare 90 Patient Safety Experts to Know in 2024</h5>
<p data-aos="fade-up" data-aos-duration="2000" class="aos-init aos-animate">Congratulations to Emily Avery, our National Director, Environment of Care and Safety, for being named as one of the 90 patient safety experts to know in 2024 by Becker's Healthcare.</p><a href="#" data-aos="fade-up" data-aos-duration="3000" class="aos-init aos-animate">See the full story</a></div></div></div></div></div>
<div class="carousel-item"><img src="..." class="w-100 fr-fic fr-dii" alt="3.jpg"> <img src="/..." class="mobile-view w-100 fr-fic fr-dii" alt="2.jpg">
<div class="carousel-caption">
<div class="container">
<div class="row">
<div class="col-lg-6 box-3">
<h5 data-aos="fade-up" data-aos-duration="1000" class="aos-init aos-animate">Insights from our in-house experts</h5>
<p data-aos="fade-up" data-aos-duration="2000" class="aos-init aos-animate">Tap into the knowledge of our industry specialists and their latest takes on emergency management, sustainability, cost containment, compliance, and more.</p><a href="..." data-aos="fade-up" data-aos-duration="3000" class="aos-init aos-animate">Learn more</a></div></div></div></div></div>
<div class="carousel-item active"><img src="..." class="w-100 fr-fic fr-dii" alt="4.jpg"> <img src="..." class="mobile-view w-100 fr-fic fr-dii" alt="1.jpg">
<div class="carousel-caption">
<div class="container">
<div class="row">
<div class="col-lg-6 box-4">
<h5 data-aos="fade-up" data-aos-duration="1000" class="aos-init aos-animate">Get more from life at Medxcel</h5>
<p data-aos="fade-up" data-aos-duration="2000" class="aos-init aos-animate">We help ambitious individuals advance their careers and get more from every part of their lives. From uplifting your community to seizing your next opportunity, learn more about what you could gain from a move to Medxcel.</p><a href="#" data-aos="fade-up" data-aos-duration="3000" class="aos-init aos-animate">Explore our culture and open roles</a></div></div></div></div></div></div>
<!--banner--arrow--carousel-->
<div class="progress">
<div class="progress-bar" style="width: 0;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<br>
</div></div></div>
Answers
Create a widget which uses a smart folder as source for the carousel images or alternatively use web content items for carousel slides.
Write the HTML in the widget code and don't use this complexity in the rich text editor.
In widget dialogs you can configure all of this as you need it. Would recommend to go this way.
In your current solution you'll have to replace the HTML with the variant of your new carousel with other/more slides.
Can you describe what exactly you would like to achieve? Maybe we can help in more detail.
Nitin,
Thanks for participating in the Kentico Community Portal Q&A discussions!
Here's some things to consider when creating discussions on the Kentico Community Portal.
- Use a helpful discussion title that is easily searchable and describes your question. Your original title "NEED HELP" does not describe your question or make your question topic easy to search for.
- Upload images to an external host (like https://beeimg.com/upload) instead of embedding them as base64 encoded data into the page. Embedding images into the page makes them very slow to load.
- Optimize your image before uploading it to help visitors with limited bandwidth and improve the SEO of your question for more visibility through organic search. You can use a free tool like Squoosh to optimize your image before uploading it.
- Format your code using the markdown editor so it's easier for others to read your question. You can read more about the editor we are using.
I've updated the title of this discussion and formatted your question. Please be considerate of others in the future.
To answer this question, you have to login first.