Tutoriale de programare web

Have problems with random errors appearing on your WordPress website? Have you checked all your plugins and server settings and issues still persist? Don’t worry! There is a simple solution by activating your WordPress error logs in the wp-config file. This sounds very techy, but it’s manageable with this guide. By switching on error logs, you’ll be able to easily find the bugs that are in your WordPress website. Ready to troubleshoot like a pro? Let’s dive into the world of WordPress error logs. Understanding WordPress Error Logs This is a basic text display of the WordPress error log. First, let’s give a brief overview of what WordPress Error Logs are and what you need to do to activate them. We’ll cover the full details on how to accomplish this in the following sections of this article.  What are WordPress Error Logs? To fully understand the benefits of error logs, you’ll need to know how WordPress error logs function. They’re essentially a record of occurrences within your WordPress site. When something goes wrong, such as a plugin conflict or a syntax error in your code, these incidents are logged in a special file. Benefits of Automated Error Monitoring There are many benefits of having an automated error log system. Automated error monitoring in WordPress offers you a proactive approach to identify and fix errors, saving you time and enhancing your website’s performance. It saves you from the tedious task of manually checking your website for errors. The system automatically scans and logs any errors that occur in your website, saving you significant time and effort. A key benefit is the speed at which it identifies errors. By promptly detecting errors, you can address them before they escalate into more significant issues, thereby preventing potential site downtime. Moreover, automated error monitoring helps you identify patterns. By regularly checking the error logs, you can spot recurrent errors and address the underlying issues causing them. This could be a faulty plugin or theme, or perhaps a piece of code that’s not compatible with your current WordPress version. Finally, it aids in troubleshooting. The detailed error logs provide valuable information about the error, such as its exact location and potential cause, making it easier for you or your developer to fix it. How to Enable WordPress Error Logs WordPress error logs can be enabled from the wp-config.php file. To enable this, you’ll need to access the wp-config.php file, a crucial component of your WordPress site that controls many important functions. It’s located in the root directory of your site. Be careful when editing this file, a small mistake can create major issues for your site. In the wp-config file, you’ll add the code to activate the WP_DEBUG function. This is a built-in WordPress function that, when enabled, triggers the error logging mechanism. To enable error logging, you’ll insert the following line of code: 1 define( ‘WP_DEBUG’, true ); Then, to ensure the errors are logged in a file, you’ll add another line: 1 define( ‘WP_DEBUG_LOG’, true ) Now, your WordPress site will start recording all errors in a debug.log file, located in the wp-content directory. Let’s cover each one of these steps in more detail. Preparations for Editing Wp-Config.Php Make sure to make a backup of your wp-config.php file before editing it. Before you start editing the wp-config.php file, it’s crucial that you make a backup to safeguard against potential errors. This file contains essential configuration settings for your WordPress site, and any mistake could potentially break your website. Here’s how you can prepare: Access your website’s files using an FTP client or the File Manager in your hosting control panel. Locate the wp-config.php file, typically found in the public_html directory. Make a copy of this file and store it in a safe location on your personal computer. While doing this, remember to never edit the original file directly. Always work on a copy and upload it only after you’re confident there are no errors. Be sure to use a plain text editor such as Notepad or TextEdit to avoid introducing unwanted formatting into the file. With these precautions in place, you’re now ready to access the File Manager and the wp-config.php file. Accessing File Manager and Wp-Config.Php You can access the wp-config.php from the file manager. You’ll need to access the File Manager in your hosting control panel to locate the wp-config.php file. This file is typically found in the public_html folder, the main directory for your website’s files. After logging into your hosting account, navigate to the control panel. Look for the File Manager icon, which may be found under the Files section. Once you’re in the File Manager, locate the public_html directory. Double-click to open it. Here, you’ll find an array of files and folders. Scroll through the list until you spot the wp-config.php file. Before making any changes to this file, it’s crucial that you create a backup. Right-click on the wp-config.php file and select Download. This will save a copy to your local drive. Right click and save a backup of the wp-config.php file. Now, you’re ready to edit the wp-config.php file. Right-click on the file again, but this time select Edit. A warning may appear, cautioning you about editing system files. Click Edit to proceed. Code Addition in Wp-Config.Php Once you’ve opened the wp-config.php file for editing, it’s time to add the specific code that enables WordPress error logs. This code will essentially tell WordPress to start recording any errors that occur on your site. Here’s the code you need to add: 1 define(‘WP_DEBUG’, true); 2 3 define(‘WP_DEBUG_LOG’, true); 4 5 define(‘WP_DEBUG_DISPLAY’, false); 6 7 @ini_set(‘display_errors’,0); Here is a breakdown of what this code does: WP_DEBUG: This enables the WordPress debug mode. WP_DEBUG_LOG: This instructs WordPress to log any errors to the wp-content/debug.log file. WP_DEBUG_DISPLAY: This line prevents errors from being displayed on your website, which is particularly important for a live site. Remember to place this code before the line that says /* That’s all, stop editing! Happy blogging. */. Once you’ve added these lines, save your changes and close the file. Add the code before the „Happy blogging” comment in the file. You’ve now successfully set up WordPress to log errors. The next step is to learn how to locate and analyze the debug.log. Locating and Analyzing Debug.Log Now that you’ve activated debug mode and error logging, it’s essential to know how to locate and analyze your debug.log file to effectively troubleshoot any issues on your site. This file is typically stored in the wp-content directory of your WordPress installation. Locating the debug.log file Use an FTP client or your hosting control panel’s file manager to navigate to the wp-content directory. Here, you should find a file named debug.log. Opening the debug.log file Open the file in a text editor. This will display a list of warnings, errors, and notices that have been logged by WordPress. Analyzing the debug.log file Each entry in the debug.log file includes a timestamp, the error type, and the file that caused the error. The error messages can be cryptic, but they usually contain clues about what’s wrong. Look for common patterns and problems related to specific plugins or themes. Frequently Asked Questions What Should I Do if I Can’t Locate My Wp-Config.Php File in the File Manager? If you can’t find your wp-config.php file, don’t panic. It’s likely hidden. Check your hosting account’s settings and ensure “Show Hidden Files” is turned on. If it’s still missing, contact your hosting provider for help. Is There a Way to Set up Email Notifications for the Occurrence of New Errors in the Log? Yes, you can set up email notifications for new errors. Use a plugin like Log Email Notifications or Error Log Monitor, which alert you when new errors are logged in your WordPress error log. How Can I Manage the Size of the Debug.Log File to Prevent It From Becoming Too Large? You can manage the size of your debug.log file by implementing a log rotation policy. This involves setting a limit on the file size, after which it’s archived and a new log file is started. Are There Any Specific Plugins That Can Assist in the Process of Setting up WordPress Error Logs? Yes, several plugins can assist in setting up WordPress error logs. Examples include Error Log Monitor, WP Log Viewer, and Debug Bar. They’ll simplify the process, making error tracking more efficient for you. What Steps Should I Take if I Have Enabled Error Logging but Still Cannot See Any Errors in My Debug.Log File? If you’ve enabled error logging but don’t see errors in your debug.log file, ensure your site has encountered errors. Check your code or use a plugin to trigger errors. Reinstate WP_DEBUG_LOG if necessary. Set up WordPress Error Logs Today! And there you have it! You’ve set up your WordPress error logs and are ready to fix your site. Make sure to keep your eye on those logs to ensure that your WordPress site stays bug free. Looking for great plugins and themes for your WordPress site? Envato Elements has tons of high quality tools that can help you with your website. 

A higher order function is a function that takes another function as a parameter, or returns a function as the output. Higher-order functions are widely used and implemented in JavaScript to improve code readability and flexibility. Integrating higher-order functions in your code logic avoids code redundancy, saving time and resources.  This tutorial will introduce you to higher-order functions, how to use them, and their benefits. Jump to content in this section How to Pass a Function as an Argument to Another function. Examples of Higher Order Functions Using the filter() method Using the Map() method Using Array.reduce() Method Benefits of Higher Order Functions How to Pass a Function as an Argument to Another function. Passing functions as arguments to other functions is one of the ways to customize the behavior of functions. It allows you to pass different functions as parameters to a single function, making your code cleaner and reusable. Let’s look at how we can do that. Example 1 Consider the calculate() function, which helps us perform different mathematical calculations. It takes two numbers, a and b, and an operation function as arguments. We then define the different mathematical functions, i.e., add, and  subtract. We then use the calculate() function with any of the mathematical functions and provide the integers on which the mathematical operations will be performed. 1 function calculate(a, b, operation) { 2 return operation(a,b); 3 } 4 5 6 function add(a, b) { 7 return a + b; 8 } 9 10 function subtract(a, b) { 11 return a – b; 12 } 13 14 15 console.log(calculate(10, 5, add)); //output // 15 16 console.log(calculate(10, 5, subtract)); //output //5 As you can see above, by separating the different operations, our code can be easily extensible without changing the calculate () function. Example 2 Let’s look at another example. Suppose you have the array of names shown below; 1 const names = [‘Ann’,’Alex’, ‘Barman’, ‘zen’,’liz’, ‘Christopher’, ‘Isabella’] Then suppose you were tasked with filtering out the people whose names have three characters or less; you would probably come up with something like this: 1 function shortNames(namesArr){ 2 const result = [] 3 for(i=0; i< namesArr.length; i++){ 4 if (namesArr[i].length <= 3){ 5 result.push(namesArr[i]) 6 7 } 8 } 9 return result 10 } 11 12 console.log(shortNames(names)) //output //[ ‘Ann’, ‘zen’, ‘Liz’ ] Here, we create a function shortNames, which takes an array of names as a parameter. Then, we defined an empty array called result. Then, we create a for loop, which loops through each element in the array and checks its length. If the length of an element is less than or equal to 3 characters, the element is considered a short name and pushed to the result array. Finally, we return the new array containing the filtered short names. Suppose we also need to get all the people with long names, i.e., names with eight or more characters; our function would look similar to the shortNames() function 1 function LongNames(namesArr){ 2 const result = [] 3 for(i=0; i< namesArr.length; i++){ 4 if (namesArr[i].length >= 8){ 5 result.push(namesArr[i]) 6 7 } 8 } 9 return result 10 } 11 console.log(LongNames(names)); //ouput // [ ‘Christopher’, ‘Isabella’ ] The LongNames and shortNames functions both perform similar tasks, such as: looping through the names array filtering each name in the array based on the specified condition pushing elements that satisfy the condition to a new array However, we can shorten our code and avoid repetitive tasks by creating a common function. Since we don’t need all the logic in our two functions above, we can rewrite them as shown below. 1 function isShortName(name, length) { 2 return name.length <= length; 3 } 4 5 function isLongName(name, length) { 6 return name.length >= length; 7 } Here, we define our functions isShortName and isLongName, which take two arguments: name and length. isShortName will check if the given name is less than or equal to the specified length. It returns true if the given name satisfies the condition.  IsLongName() does something similar but returns true if the given name is more than or equal to the provided length. Next, we will create a filterNames function to filter names based on different conditions. The filterNames function will take three arguments: names array. The callback function(can either be  IsLongName or isShortName). The length condition used to filter the names. 1 function filterNames(namesArr, conditionFn, length) { 2 const result = []; 3 for (let i = 0; i < namesArr.length; i++) { 4 if (conditionFn(namesArr[i], length)) { 5 result.push(namesArr[i]); 6 } 7 } 8 return result; 9 } So now if we decide to use the filterNames()  with any of the callback functions, we will get the same output. 1 console.log(filterNames(names, isShortName, 3)); // [ ‘Ann’, ‘zen’, ‘Liz’ ] 2 console.log(filterNames(names, isLongName, 8)); //[ ‘Christopher’, ‘Isabella’ ] Examples of Higher Order Functions Higher-order functions are commonly used for mapping, filtering, and reducing arrays. The most commonly used higher-order functions include: filter()  map() reduce() Using the filter() method As the name suggests, the filter() method filters elements on an array based on the specified condition. When applied to an array, the filter() method will create another array with only the elements from the original array that satisfy the condition in the function. Consider the array below, which consists of the names and salaries of some employees. 1 const employees = [ 2 {name: „Alice”,salary: 25000 }, 3 {name: „Bob”,salary: 30000}, 4 {name: „Charlie”,salary: 28000}, 5 {name: „Cate”,salary: 100000,}, 6 {name: „Mike”,salary: 120000,}, 7 {name: „Lucy”,salary: 55000,}, 8 {name: „Liam”,salary: 70000,}, 9 ] Suppose we want to filter out the employees earning more than 70,000. One way to do this would be using a for loop, loop over each element and, with each iteration, push the employee that satisfies our condition to a new array, as shown below. 1 const filteredEmployees = [] 2 for(i =0 ;i <employees.length; i++){ 3 if(employees[i].salary >=70000 ){ 4 filteredEmployees.push(employees[i]) 5 }} 6 7 console.log(filteredEmployees); Even though the function works as expected, there are better ways to implement the solution. The filter () method is an excellent solution to our problem. Its syntax looks like this; 1 const newArray = array.filter(callbackFn,thisArg) Where callbackFn is the function for filtering elements. The callbackFn takes three optional arguments: element, index, and array.  thisArg is optional. Let’s first define the callbackFn, which will take in an employee object and check if the value in the salary property is more than 70,000. 1 function checkSalary(employee){ 2 return employee.salary >= 70000 3 } Next, let’s apply the filter() method to our callbackFxn and assign it to the filtredArray. 1 const filteredArray = employees.filter(checkSalary); 2 console.log(filteredArray) Our output will look like this: 1 [ 2 { name: ‘Cate’, salary: 100000 }, 3 { name: ‘Mike’, salary: 120000 }, 4 { name: ‘Liam’, salary: 70000 } 5 ] Using the Map() Method The map() method is another higher-order function which creates a new array by applying a callback function to each element on the original array. The syntax looks like this: 1 const newArray = originalArray.map(callbackFn, thisArg); where the callbackFn takes in the following parameters,  currentValue – the current element being processed index – the index of the current element being processed array -the original array  thisArg is optional. Given the students array below, which contains students’ names and grades for different subjects and overall grades, we want to extract just the names and overall grades from the array. 1 const students = [ 2 { 3 names: „Alice Bob”,Math: 85,Science: 92,History: 78,English: 88,Art: 95, 4 grade:87.6 5 }, 6 { 7 names: „Michael Smith”,Math: 76,Science: 89,History: 92,English: 80, 8 Art: 91, 9 grade:85.6 10 }, 11 { 12 names: „William Brown”,Math: 70,Science: 78,History: 75,English: 88,Art: 79, 13 grade:76 14 }, 15 { 16 names: „Julia Lee”, Math: 52, Science: 63, History: 76, English: 87, 17 Art: 94, 18 grade:74.2 19 }, 20 { 21 names:”George Harrison”,Math: 88,Science: 77,History: 50,English: 84, 22 Art: 71, 23 grade:74 24 }, 25 ]; We can use the map() method to retrieve the student names and overall grades. First, let’s create the callback function, which takes a student as an argument and extracts the student’s name and the overall grade. 1 function gradeOnly(student){ 2 return ({names:student.names, grade: student.grade}) 3 } Our callback function will take a student object as an argument and return a new object containing only the names and grade properties.  Next, we will use the map() method to create a new array by applying the gradeOnly() to each student in the students array.  The map() method will iterate through each student array element and apply the gradeOnly() function.  1 const studentsData = students.map(gradeOnly) 2 console.log(studentsData) Our output will be: 1 [ 2 { names: ‘Alice Bob’, grade: 87.6 }, 3 { names: ‘Michael Smith’, grade: 85.6 }, 4 { names: ‘William Brown’, grade: 76 }, 5 { names: ‘Julia Lee’, grade: 74.2 }, 6 { names: ‘George Harrison’, grade: 74 } 7 ] Using arrow functions, we can simplify this expression as follows: 1 const studentsData = students.map( 2 student=> ({names:student.names, grade: student.grade})) 3 console.log(studentsData) Using Array.reduce() Method As the name suggests, the reduce() method takes in an array and reduces it to a single value. The syntax for the reduce method looks like this. 1 array.reduce(function(total, currentValue, currentIndex, arr), initialValue) where The total will be the result the currentValue will be the current element during the iteration process The initialValue will be 0 currentIndex and arr are optional  Suppose you wanted to find out the sum of numbers in the numbers array below using the reduce() method: 1 numbers = [10,20,30,40] Let’s start by defining the callback function that will take in the total and number as arguments. The callback function will return the result of adding each number in our original array to the total.  1 function addNumbers(total,number){ 2 return total+=number 3 } Next, apply the reduce() method to the numbers array and use the addNumbers as the callback function. Each element in the numbers array is applied to the callback function for each iteration. 1 const cumulativeTotal =numbers.reduce(addNumbers); 2 console.log(cumulativeTotal); //output //100 The output will be 100, as expected.  If we don’t define an initial value, the first element will be considered the initial value, and the output will still be the same. 1 numbers = [10,20,30,40] 2 numbers.reduce(function(total, number){ 3 return total+number 4 }) We can further shorten our expression using arrow functions as follows: 1 const cumulativeTotal = numbers.reduce((total,number) => total+=number) 2 console.log(cumulativeTotal); //output //100 Benefits of Higher Order Functions Higher-order functions abstract the underlying logic required for performing tasks. For example, when we used the reduce() method, we abstracted the underlying logic of iterating through each element, adding it to the total, and returning the result. We didn’t need to write the iteration and accumulation logic explicitly; the reduce function handled it for us. Utilizing higher-order functions enhances code readability and maintainability compared to implementing the same functionality with loops. Higher-order functions also make your code reusable. Up Your JS Game With Tuts+ Demystifying JavaScript Arrow Functions Esther Vaati 14 Nov 2023 An Introduction to JavaScript Event Listeners for Web Designers Anna Monus 25 Jul 2023 How to Implement Debounce and Throttle with JavaScript Jemima Abu 12 Jun 2023 Conclusion This tutorial introduced you to higher-order functions and offered practical examples and scenarios where they can be applied to JavaScript programming. Incorporating higher-order functions into your development practices can significantly enhance your skills as a JavaScript developer.

Staff Pick HomeAlarms HomeAlarms offers a comprehensive solution for security companies, featuring smart home solutions, security services, and home alarm systems, all wrapped up in a template that includes 2 powerful contact forms and special forms for those seeking price quotes. Staff Pick Teknik Teknik is a fully modern template designed for security service providers. It offers a range of features like multiple header styles, service listings, and a blog section to keep your audience engaged. Sectox Sectox is another versatile HTML template tailored for both residential and commercial security solutions, featuring a creative design with 3 homepage layouts and over 19 HTML files. HoomPotact HoomPotact is a perfect fit for companies providing smart home solutions and security services, featuring 4 home versions, 9 inner pages, and an Owl Carousel Slider for a dynamic user experience. Benime Benime is a user-friendly HTML5 template ideal for CCTV surveillance and home security services, boasting features like CSS3 animation effects, W3C markup validation, and compatibility with all major browsers. Ingenious Ingenious is a versatile template designed for smart home automation services, featuring solutions for energy-saving, video monitoring, and home security, along with retina-ready adaptability and extensive documentation. Technix This is a robust HTML template tailored for SaaS products, software, and IT solutions, offering a responsive design, Bootstrap 5.x framework, and an eye for UX. Aiva Aiva is an Angular-based template perfect for IT, SaaS, and tech-focused agencies, featuring Angular 13, TypeScript, and Bootstrap 5.x, along with RTL support for Arabic and Hebrew language-based websites. Offshore Though technically for industrial businesses, this template is still a perfect fit for corporate and industry services like home security, featuring a clean and modern design, 20+ HTML pages, and a working Ajax PHP contact form. Truder Truder is a specialized HTML template designed for CCTV security service agencies, offering niche-specific features like clean and modern style, easy customization, and Bootstrap grid-based design. Panthar Panthar is a professional security agency template that offers a well-structured layout for services like bodyguard and protection but could be adapted for home security sales, featuring an exclusive carousel, achievements & awards section, and a large footer. SafZon This focused HTML template is designed for security guard services, CCTV, and smart home solutions, boasting features like 2 unique home layouts, a total of 9+ HTML pages, SaaS support, Bootstrap v5.2.1, and a contact form. If you’re in the home security sector and looking to either launch or revamp your online presence, you’re in luck. We’ve compiled some of the best home security website templates available on Envato Elements to save you some time. These templates are more than just nice to look at. They come loaded with features that can make your website as secure and reliable as the services you offer. And even those more targeted toward industrial or web security sectors can be easily repurposed for home security or security service personnel.

A carousel is a great example of a possible CSS-only interactive feature. While carousels (aka sliders) are usually built with JavaScript, if we remove the complex features, they’re simply scrollable elements with an overflow; exactly what CSS is made for. You might be thinking “CSS is used for styling while JavaScript is used for interactivity, that’s just the way the web works.” However, considering the fact that CSS is loaded on a webpage faster than JavaScript, and CSS also causes less reflow on a page (which improves performance), it’s fair to say we should use CSS for interactivity wherever possible. Our Easy Slider So let’s take a look at the slider (carousel) we’ll be building today. Scroll through to see the scroll-snap effect: 1. Layout With HTML The layout of our easy slider is simple: we’ll create a carousel-container div to hold the carousel-slide elements.  1 <div class=”carousel-container”> 2 <div class=”carousel-slide”>1</div> 3 … 4 </div> That’s all we need so let’s move on to the styling 2. Carousel Behaviour with CSS Once we have our carousel slides set up, we’ll style the carousel to have the following features: Scrollable content Snap to next slide Progress bar indicating slide progress Scrollable Content For the scrollable content, we’ll use the display:flex and overflow-x: auto properties. We’ll also style slides so we can see 3 slides on the desktop screen and 1 slide on mobile. 1 .carousel-container { 2 display: flex; 3 overflow-x: auto; 4 } 5 6 .carousel-slide { 7 flex: 1 0 30%; 8 } 9 10 @media (max-width: 600px) { 11 .carousel-slide { 12 flex: 1 0 90%; 13 } 14 } Snap to Slide Next, to achieve the snapping effect on the slides, we’ll use the CSS scroll-snap properties. The scroll snap properties allow us define “snapping” points on an element (the point of the element that we want to be fully visible once scrolling). Our updated code looks like this: 1 .carousel-container { 2 display: flex; 3 overflow-x: auto; 4 scroll-snap-type: x mandatory; 5 } 6 7 .carousel-slide { 8 flex: 1 0 30%; 9 scroll-snap-align: center; 10 } 11 12 @media (max-width: 600px) { 13 .carousel-slide { 14 flex: 1 0 90%; 15 } 16 } We can get a better understanding of how the scroll-snap property works using this demo: Let’s break down what’s happening: 1. The first property is the scroll-snap-type. This property is applied to the parent container and accepts two keywords: The first keyword determines which axis the scroll snap should be applied to – x, y, both or none.  The second keyword determines the behaviour of the scroll snap. If set to proximity, the scroll will only snap to the nearest element if it’s close enough to the edges of the container. Mandatory means the container will always snap to whichever element is closest. 2. The second property is the scroll-snap-align. This property applies to the children of the scroll snap type container and it determines which part of the element is snapped into view. Optional: CSS-Only Progress Bar To keep inline with our CSS-only interactivity, we can take advantage of native browser features to create a progress bar for our carousel. We’ll do this by styling the carousel container scrollbar to give the appearance of a progress bar. This is what the code looks like: 1 .carousel-container::-webkit-scrollbar { 2 height: 8px; 3 } 4 5 .carousel-container::-webkit-scrollbar-thumb { 6 background: #29AB87; 7 } 8 9 .carousel-container::-webkit-scrollbar-track { 10 background: #b1b3b399; 11 } 12 13 .carousel-container::-webkit-scrollbar-track-piece:start { 14 background: #29AB87; 15 } Let’s look at the properties we’re using: ::webkit-scrollbar: the entire scrollbar element  ::webkit-scrollbar-thumb: the draggable bar on the scrollbar ::webkit-scrollbar-track: the path that the scrollbar thumb is on ::webkit-scrollbar-track-piece:start: the path of the track not covered by the scrollbar thumb, the :start selector targets only the path behind the scrollbar thumb In the diagram above, we can see what parts of the scrollbar are being targeted. By making the -webkit-scrollbar-thumb and ::webkit-scrollbar-track-piece:start the same colour, the scrollbar gives the impression of being filled in as it’s being scrolled, thus creating a progress bar. And since our progress bar is actually a scrollbar, it can also be used to scroll through the carousel as an additional feature: it’s a win/win! The ::webkit-scrollbar properties are non-standard, pretty sketchy, and not supported by all browsers so it’s not recommended to use this in a production environment. This means our progress bar will look like a regular scrollbar on non-supported browsers, or if you choose not to include these ::webkit-scrollbar rules. That’s all there is to our easy slider! We’ve built a scrollable container with a nifty snapping feature and even added a progress bar using only CSS: 3. More Features With JavaScript Since we’ve gotten the basic feature of the carousel out of the way, we can go on to add even more features, using JavaScript this time. One of those features is using arrows to handle the carousel navigation. In a previous tutorial, we looked into building a carousel with JavaScript (less than 14 lines of code!), so we can combine that tutorial with this one to add even more features to our easy slider. How To Build a Simple Carousel With Vanilla JavaScript (14 Lines of Code!)In this tutorial, we’ll build a simple carousel or slider using less than 15 lines of vanilla JavaScript. Jemima Abu 16 Aug 2023 JavaScript This is what our combined carousel looks like: Just for fun, in this demo the code has been refactored to use even fewer lines of JavaScript, so this is what our updated carousel arrow function looks like: 1 const carousel = document.querySelector(„.carousel-container”); 2 const slide = document.querySelector(„.carousel-slide”); 3 4 function handleCarouselMove(positive = true) { 5 const slideWidth = slide.clientWidth; 6 carousel.scrollLeft = positive ? carousel.scrollLeft + slideWidth : carousel.scrollLeft – slideWidth; 7 } Then we pass that function to our HTML arrows: 1 <button class=”carousel-arrow carousel-arrow–prev” onclick=”handleCarouselMove(false)”> 2 &#8249; 3 </button> 4 5 <button class=”carousel-arrow carousel-arrow–next” onclick=”handleCarouselMove()”> 6 &#8250; 7 </button> And with that, we’ll call it a day on our modded-up carousel!

Premium Fashion Sales Banners Ad Templates If you’re creating sales ads for your fashion store website, a great fashion sales banner ad template can help. Find the fashion sales banners ad templates on Envato Elements including the ones mentioned below: Fashion Modern Ads Banner Template This trendy, clean fashion banner ad template to help you promote your fashion sales includes 15 PSD template files.  Fashion Banners Ad PSD Template How about a colorful fashion banner ads template? This one comes with 14 PSD template files that you can scale to the sizes you want. Fashion Sale Ad Banners Template Looking for a unique fashion sales ad banner template for your online store website? Try this template that has 20 standard ad banners sizes and comes with smart object layers for image replacement. Fashion Sale Ad Banners A fashion banner ads template with editable layers, 14 different size banners with multiple shapes, and includes free fonts. Ramadhan Fashion Sale Template This template comes in 8 banner sizes including mobile. It is available in PSD, EPS, Vector and includes RGB color.  Fashion Banners Ad Template Create eye-catching advertisements effortlessly with this template. It features 15 PSD files, with clean layout designs that are perfectly-sized for Google Adwords and Facebook banners. BRIGHT Fashion Store Web Banner Ads This standout fashion store web banner includes 12 high-quality PSD template files optimally designed for Facebook ad sizes. It features 72 DPI resolution, RGB color, and editable files.  Fashion Sale Banners Ad Want a gorgeous banners for fashion sales ads? It features well-organized layers, smart objects for image replacement, 72 DPI resolution, free fonts, and effortless editing and customization. Woman Fashion Banners Ad Are you looking for versatile fashion banner ad templates for women clothing and accessories? This template offers 15 PSD customizable files. It is perfectly tailored for Google Adwords and Facebook Banner Ads.  Color Mix Fashion Banners Ad Template Take advantage of this versatile 15 PSD template collection, optimized for sizes for Google Adwords and Facebook Banners. It makes for effortless customization for your store brand.  Fashion Sale Banners Ad Grab this attractive banner ad pack that is guaranteed to elevate your fashion sales. It includes 10 customizable PSD templates and clean layouts.   Fashion Banners Ads Template For successful fashion sales, you need the best banner ad templates to advertise on different media. This one features 14 pre-sliced ad banners, editable layers, free fonts, and seamless customization. Fashion Banners Ad PSD Template Let your online ads enhance your brand with this collection of 14 PSD template files that are compatible with Adobe Photoshop CS6.  Fashion Banner Instagram Ad Template Increase your Instagram presence with 10 stylish fashion banner PSD templates. They feature editable text, scalable vector shapes, and smart objects.  Fashion Weekend Google Ad Banner Here is a perfect Google Ads banner to ignite your weekend fashion sales. It includes RGB color templates, features 12 customizable PSD files, and comes with resizable objects and smart layers.  Fashion Sale Banners Ad PSD Template You want some eye-catching fashion sales banner ad templates? You can’t go wrong with this one with a clean design, 14 customizable PSD files with Google Adwords and Facebook Banner Ad sizes.     Fashion Facebook Ad Banners – 136 PSD This template brings back the vintage age of advertising to help your fashion ads command attention. It includes a black and white banner ad collection of 22 standard Ad banners sizes and editable PSD files.  Flash Sale Fashion Banners Ad Template Having a flash fashion sale? How about this template where you can customize colors and text for Google Ads and Facebook Ads? It features 15 PSD template files layered by name.  Winter Sale Banner Ad Template Supercharge your winter sales with captivating banner ads designed for Google Adwords and Facebook Features. It includes 15 irresistible PSD templates that will make your promotions pop! Black Friday Fashion Banner Template Promote your Black Friday sales on Instagram, X, Facebook with this Black Friday Fashion Banner ad template. It comes with 4 Instagram story templates and 4 Instagram post templates organized layers, and has 72DPI resolution.  Premium Fashion sales ads banner templates feature easy-to-customize elements for your fashion store website. They’ll also include a variety of PSD templates, editable text and customizable colors, and more. You can’t go wrong with them! Check out our fashion banner ads templates over on Envato Elements. Get access to all of them and tons of other premium digital assets for a low monthly fee! Editorial Note: This article has been completely rewritten to make it more usable for the reader.