Hello I have been working on a project lately where I have a slider with various elements in it and when clicking on the button 'Learn more' on a particular slider element will open a pop-up modal contain specific details to that selected slider element. Now my slider is becoming really long and I am having numerous slides and modal. The only element that is shared between my slide and modal are the title and the image location and I have been wondering if I can use either JavaScript or anything to make my code look nice and remove the repeating pattern of my code Below is my code:
<!-- Slides 1 -->
<div class="swiper-slide">
<div class="card">
<div class="card_image">
<img src="CSS/Assets/Images/Slider_Images/Teamwork.png">
</div>
<div class="card_info">
<h3 class="card_title">1. Teamwork</h3>
<p>
The ability to work well in a team. This shows that you have the maturity to realise that no work is standalone
</p>
<button data-modal-target="#modal1" class="card_btn">
<h4>Learn More</h4>
</button>
</div>
</div>
</div>
<!-- Slides 2 -->
<div class="swiper-slide">
<div class="card">
<div class="card_image">
<img src="CSS/Assets/Images/Slider_Images/Decision Making.jpg">
</div>
<div class="card_info">
<h3 class="card_title">2. Decision Making</h3>
<p>
Decision making is the process of making choices by identifying a decision, and assessing alternative resolutions.
</p>
<button data-modal-target="#modal2" class="card_btn">
<h4>Learn More</h4>
</button>
</div>
</div>
</div>
In my code I have numerous slides and when clicking on the button Learn More should open another code which repeat itself as follows:
<!-- Modal 1 -->
<div class="modal" id="modal1">
<div class="modal_header">
<div class="modal_image">
<img src="CSS/Assets/Images/Slider_Images/Teamwork.png">
</div>
</div>
<div class="modal_body">
<h3 class="modal_title">1. Teamwork</h3>
<div class="modal_para">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga assumenda nulla reprehenderit. Numquam culpa, quidem pariatur nam commodi ea necessitatibus incidunt sunt sapiente laboriosam asperiores assumenda repudiandae? Perspiciatis, sed! Veniam?
</p>
</div>
<button data-close-button class="close-button">Close</button>
</div>
</div>
<div id="overlay"></div>
<!-- Modal 2 -->
<div class="modal" id="modal2">
<div class="modal_header">
<div class="modal_image">
<img src="CSS/Assets/Images/Slider_Images/Decision Making.jpg">
</div>
</div>
<div class="modal_body">
<h3 class="modal_title">2. Decision Making</h3>
<div class="modal_para">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga assumenda nulla reprehenderit. Numquam culpa, quidem pariatur nam commodi ea necessitatibus incidunt sunt sapiente laboriosam asperiores assumenda repudiandae? Perspiciatis, sed! Veniam?
</p>
</div>
<button data-close-button class="close-button">Close</button>
</div>
</div>
<div id="overlay"></div>
My question for that is: Is there a way for me to continue add other slides and modal in a way that would reduce the repeated HTML pattern in JavaScript or PHP while keeping the integrity of my code ? Each element in the slider are different a open a respective modal pop-up they only share the same image location and title. The text however is not shared between the slide and modal and I was wondering if any code in JavaScript will help me having a cleaner code as my project slider is increasing
If you are using php you can just use an array of arrays and loop through it to create your slides:
<?php
$myslides = array(
array(
'id' => 1,
'title' => 'First slide',
'content' => 'somthing to say',
'imgUrl' => 'http://myimageslink.com/img.png'
),
array(
'id' => 2,
'title' => 'Second slide',
'content' => 'somthing to say',
'imgUrl' => 'http://myimageslink.com/img.png'
),
array(
'id' => 3,
'title' => 'third slide',
'content' => 'somthing to say',
'imgUrl' => 'http://myimageslink.com/img.png'
),
array(
'id' => 4,
'title' => 'Fourth slide',
'content' => 'somthing to say',
'imgUrl' => 'http://myimageslink.com/img.png'
),
//More arrays means more slides
);
?>
then loop array to get your slides :
<?php
foreach($myslides as $slide) :
?>
<div class="swiper-slide">
<div class="card">
<div class="card_image">
<img src="<?= $slide['imgUrl']; ?>">
</div>
<div class="card_info">
<h3 class="card_title"><?= $slide['title']; ?></h3>
<p>
<?= $slide['content']; ?>
</p>
<button data-modal-target="#modal<?= $slide['id']; ?>" class="card_btn">
<h4>Learn More</h4>
</button>
</div>
</div>
</div>
<?php
endforeach;
?>
and don't forget to loop also through your model the same loop with different html
<?php
foreach($myslides as $slide) :
?>
<div class="modal" id="modal<?= $slide['id']; ?>">
<div class="modal_header">
<div class="modal_image">
<img src="<?= $slide['imgUrl']; ?>">
</div>
</div>
<div class="modal_body">
<h3 class="modal_title"><?= $slide['title']; ?></h3>
<div class="modal_para">
<p>
<?= $slide['content']; ?>
</p>
</div>
<button data-close-button class="close-button">Close</button>
</div>
</div>
<div id="overlay"></div>
<?php
endforeach;
?>
PS: Php is good for rendrering html, but better keep it for other server side tasks, you may consider learning ReactJS to handle complicated frontEnd tasks
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Find the answer in similar questions on our website.
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.
PHP (from the English Hypertext Preprocessor - hypertext preprocessor) is a scripting programming language for developing web applications. Supported by most hosting providers, it is one of the most popular tools for creating dynamic websites.
The PHP scripting language has gained wide popularity due to its processing speed, simplicity, cross-platform, functionality and distribution of source codes under its own license.
https://www.php.net/
JavaScript is a multi-paradigm language that supports event-driven, functional, and mandatory (including object-oriented and prototype-based) programming types. Originally JavaScript was only used on the client side. JavaScript is now still used as a server-side programming language. To summarize, we can say that JavaScript is the language of the Internet.
https://www.javascript.com/
React is currently the leader in JavaScript UI frameworks. First, the Facebook developers started working on this to make their job easier. An app called Facebook Ads grew very quickly, which meant complex management and support. As a result, the team began to create a structure that would help them with efficiency. They had an early prototype before 2011, and two years later, the framework was open source and available to the public. It is currently used by many business giants: AirBNB, PayPal, Netflix, etc.
https://reactjs.org/
CSS (Cascading Style Sheets) is a formal language for describing the appearance of a document written using a markup language.
It is mainly used as a means of describing, decorating the appearance of web pages written using HTML and XHTML markup languages, but can also be applied to any XML documents, such as SVG or XUL.
https://www.w3.org/TR/CSS/#css
HTML (English "hyper text markup language" - hypertext markup language) is a special markup language that is used to create sites on the Internet.
Browsers understand html perfectly and can interpret it in an understandable way. In general, any page on the site is html-code, which the browser translates into a user-friendly form. By the way, the code of any page is available to everyone.
https://www.w3.org/html/
Welcome to the Q&A site for web developers. Here you can ask a question about the problem you are facing and get answers from other experts. We have created a user-friendly interface so that you can quickly and free of charge ask a question about a web programming problem. We also invite other experts to join our community and help other members who ask questions. In addition, you can use our search for questions with a solution.
Ask about the real problem you are facing. Describe in detail what you are doing and what you want to achieve.
Our goal is to create a strong community in which everyone will support each other. If you find a question and know the answer to it, help others with your knowledge.